jQuery horizontal accordion?

[daGUY]

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:

[chazzwick]

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
• Contact
• Info

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

[daGUY]

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:

[Author]

Posts