Grow your CSS skills. Land your dream job.

jQuery horizontal accordion?

  • # May 14, 2009 at 4:03 pm

    Does anyone know if it’s possible to create a jQuery accordion where each section is laid out horizontally but still opens vertically?

    In other words, with a normal jQuery accordion, you have something that looks like this:

    [LINK 1]
    [LINK 2]
    [LINK 3]

    And then if you click [LINK 1], you get this:

    [LINK 1]
    (Link 1 content)
    [LINK 2]
    [LINK 3]

    What I want to do is have the links laid out horizontally:

    [LINK 1][LINK 2][LINK 3]

    But when you click [LINK 1], have its content show up underneath, like this:

    [LINK 1][LINK 2][LINK 3]
    (Link 1 content)

    Is this even possible? I have no idea :lol:

    # May 14, 2009 at 6:21 pm

    I did something a bit similar to what you are looking for. Heres a demo http://charles-harvey.co.uk/examples/accordion2/

    HTML

    Code:

    About Us

    Lorem ipsum dolor sit amet, consectetuer adipiscing

    Contact Us

    Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.

    Info

    Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.

    CSS

    Code:
    * { margin: 0;padding:0}

    body {background: #fff;font:62.5% Arial,sans-serif;margin:20px;}

    h2 {font-size: 2.6em;color:#fff;padding:20px 20px 5px;font-weight:normal;letter-spacing: -1px;}
    p {font-size: 1.2em;color:#000;padding:0 0 15px 20px;color:#fff}

    .clear {clear:both}

    #buttons {width:300px;}
    #buttons ul {list-style-type:none;cursor:pointer;overflow:hidden;}
    #buttons ul li {width:100px;float:left}
    #buttons a {display:block;font-size:2em;color:#fff;text-align:center;height:40px;}

    #text{width:300px;height:200px;overflow:hidden}

    div#text div {height:200px;}

    #about, a.about {background:#ae13d5;}
    #contact, a.contact {background:#78a4d3;}
    #info, a.info {background:#98aa11;}
    #details, a.details {background:#993b67;}
    #schedule, a.schedule {background:#923127;}

    The JQuery

    Code:
    $(document).ready(function() {
    $(“div#text div:not(#about)”).hide();

    $(“#buttons li a”).click(function(){
    var target = $(this).attr(“class”);
    $(“#”+target).slideDown(500);
    $(“#text div”).not(“#”+target).slideUp(500);
    });
    });

    Hopefully this should work

    # May 15, 2009 at 11:34 am

    Thanks for the example. I ended up not using it, but that might come in handy in the future :-)

    Anyway, I did end up getting this to work – it was a pain, but I did it :lol: Basically, rather than having one accordion with four sections, I created four accordions (each with unique IDs) with one section each. Then I floated the accordions themselves to the left – that way, I was able to position everything where I wanted it while still keeping the contents of the individual accordions arranged vertically, like normal.

    But then that created another problem – I lost the ability to only have one section open at a time, because the auto-close behavior only works within one accordion, not across multiple ones. So to get around that, I attached a custom function to each accordion that closes the open section on mouseleave – that makes it impossible to have more than one section open at a time.

    Phew! Quite a pain, but I’m proud of myself for getting it to work :lol:

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".