I need help with my horizontal accordion

JavaScript
1

Hi folks, I have been reading through the “jQuery Novice to Ninja” book and I want to modify the accordion to be horizontal.

I need to recreate the following effect: http://www.ascensionlatorre.com/the-team

When a team member is clicked it slides open, then when another is clicked the open one closes and the new one opens.
Currently I have it so they all open.


$("#team > aside").hide();
$("#team > aside:first").show();
$("#team > figure").bind('click', function() {
$(this).next().animate({'width': 'toggle'}, 'slow', 'linear');		
});

Also any one any idea’s how to get the scroll working? I have tried several carousels but the dynamic with of the content seems to ruin everything.

Thanks in advance.

2

Would you say an accordion is the right way to go on this?

3

Right guys, decided not to go the accordion route.

I am using the “Bouncy Content Panes” but horizontally.

However when the page loads the last pane starts open, how can I stop this?

My code (simplified):


$('#bio > aside').hide();

  	$('#bio > figure').click(function() {
    	$(this).next().animate(
	    	{'width':'toggle'}, 'slow', 'swing');
  	});





<div id="bio">
<figure><img src=""</figure>
<aside><p>bio goes here</p></aside>
</div>

Anyone??