Forums

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

<div id=\"buttons\">
	<ul>
		<li><a class=\"about \">About</a></li>
		<li><a class=\"contact\">Contact</a></li>
		<li><a class=\"info \">Info</a></li>
	</ul>

</div>


<div id=\"text\">
	<div id=\"about\">
		<h2>About Us</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
	</div>
	<div id=\"contact\">
		<h2>Contact Us</h2>
		<p>Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.</p>
	</div>
	<div id=\"info\">
		<h2>Info</h2>
		<p>Lorem ipsum dolor sit amet, adipiscing elit. Nulla quam.</p>
	</div>		
</div>

CSS

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

$(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:

treehouse : what would you like to learn today?

Forums

jQuery horizontal accordion?