The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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



    About Us

    Lorem ipsum dolor sit amet, consectetuer adipiscing

    Contact Us

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


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


    * { 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;}


    div#text div {height:200px;}

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

    The JQuery

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

    $(“#buttons li a”).click(function(){
    var target = $(this).attr(“class”);
    $(“#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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed