Animated Horizontal Accordion using jQuery

In this tutorial we build a horizontial accordion powered by jQuery. You'll learn how jQuery interacts with the DOM (document object model) to keep track of the current visible panel and animate the panels open and closed. Complete source files can be downloaded at http://btsolutionsllc.com/tutorials/jQuery/horizAccordion_src.zip

Category:

Howto & Style

Tags:

• jQuery
• JavaScript
• accordion
• horizontal
• animated
• sliding
• panel
• source
• code
• howto
• build a javascript accordion
• animate
• panels
• tips & tricks
• programs
• computers

[RobinGuiton]

Hey there! I'm currently using this tutorial but i can only seem to get 3 tabs working. In my design i have four tabs and the last simply isn't showing. All the html/css is sound and identical to the other three. Is there some script in the horizontalaccordion javascript file that determines the no. of tabs?

[wormracer08]

@RobinGuiton Shouldn't be an issue. The scripts finds all the h3 elements in the wrapper div. You can post your code in the forums at my site and I'd be more help there. Codecompendium[dot]com.

[RobinGuiton]

@wormracer08 Hey thanks for that but i seem to have just resolved it. Dunno what the problem was but i just deleted the fourth div and recreated it and then it was perfect! Thanks again for a great tutorial!

[wormracer08]

@RobinGuiton glad you got it worked out my friend. Thanks for watching the tutorial.

[Vaporilo]

is there any way to do this with a spry collapsible or spry accordion? this is a bit too advanced for me.

[wormracer08]

@Vaporilo not that I know of, sorry.

[HouseXElectroXGames]

thanks man, it helped me a lot! But I have an advice, use the latest js of jquery!

As you can see the both actions (animate->width:0% and animate->width:100%) does not match with the timing perfectly (, with the latest version it does. Besides the effect is much more liquid then....

[wormracer08]

@aplus919 Thanks! Glad you found it useful.

[aplus919]

Amazing tutorial. Very easy to understand. Thank you.

[wormracer08]

@novapixelsdesigns sounds good man, have fun with it!