Foundation horizontal accordion - Animated Horizontal Accordion using jQuery

18th of May 2012 15

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

Share it!

Was it good for you to?


Support for the site!

No sponsors at the moment.

15 great comment(s) for this post

  1. wormracer08 9:51 pm 18/05 of 2012

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

  2. RobinGuiton 9:59 pm 18/05 of 2012

    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!

  3. wormracer08 10:37 pm 18/05 of 2012

    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.

  4. RobinGuiton 11:05 pm 18/05 of 2012

    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?

  5. HouseXElectroXGames 11:25 pm 18/05 of 2012

    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….

  6. wormracer08 11:42 pm 18/05 of 2012

    not that I know of, sorry.

  7. Vaporilo 11:47 pm 18/05 of 2012

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

  8. wormracer08 12:18 am 19/05 of 2012

    Thanks! Glad you found it useful.

  9. aplus919 1:06 am 19/05 of 2012

    Amazing tutorial. Very easy to understand. Thank you.

  10. wormracer08 2:05 am 19/05 of 2012

    sounds good man, have fun with it!

  11. novapixelsdesigns 2:51 am 19/05 of 2012

    This tutorial is really cool! I probably will use this for my “links” section. My site is clean and professional, but a little boring.. heh. I want to make it to where every time someone clicks a title, a picture along with the name of the site will show up. How’s that sound?

  12. wormracer08 3:40 am 19/05 of 2012


  13. wormracer08 4:29 am 19/05 of 2012


  14. PhineasandFerbinator 4:29 am 19/05 of 2012

    cool and awesome

  15. MrShawnlloyd 5:25 am 19/05 of 2012

    excellent worm!!


Your opinion matters. Add it below.

Tip: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent comments


Copyright since 2010. All rights reserved. Design and the Absolute Theme by Tommie Hansen.