jQuery Accordion Plugin

Posted by on Feb 4, 2011 in jQuery, Projects, Web Development | 9 comments

jQuery Accordion Plugin

jQuery Accordion Plugin

This jQuery plugin provides an easy way to add an accordion to your website. It also has cookie support built in, is fully customizable, and works with all modern browsers. This is a great plugin for site navigation.


Plugin Project/ Source

Demo / FAQ

9 Responses to “jQuery Accordion Plugin”

  1. Works well! However if you put two on the same page and click they both open at the same time.

    See http://www.prattrb.com/blog :)

    • John Snyder says:

      Looking at your source I’m not sure you are using it. Where are you initializing the accordion? All I can see is:


      And since both have the same class, when you click 1 both will be toggled.

      Edit, looks like it does :( I’ll sort it out.

    • John Snyder says:

      You’ll need to give it a different class for cssOpen and cssClose, since they are the same when it closes them based on the class it will close all of them regardless if in another part of the page. I’ll have to go in and change the way it searches for the class and be sure its properly nested to prevent these kinds of conflicts in the future.

      If all you are looking for is a collapsible panel (can open/close independently) look at my collapsible plugin, it seems to be what you are looking for.

  2. First, holy s@!* your fast with your responses. Thank you so much. I had the javascript developed by a friend and upon further inspection it appears that the collapsible plugin is what he used. The process you described above is still what I need to do? Thanks John

    • John Snyder says:

      :) Just click on the demo link, I played around with it and came up with a temp solution for the time being. Do a view source on the demo to see how I changed the class name for the other accordion. It should also be explained in the default options about what is changeable.

      I’ll try and update the plugins to fix it where you don’t have to change this for multiple accordions.

      Also, I made another sample demo to show its usage to a friend, not sure how long it will stay there but your welcome to check it out: Alternate Demo It has cookies disabled so it will be always closed on a new page, and some custom css changes for the background image. It was done rather hastily so its just an example not a recommendation.

      • I only see one accordian in the “demo link” you posted :X

        • John Snyder says:

          The original demo has a second accordion, at the bottom, its horribly styled as it was just rushed in there. The alternate demo is more for seeing how to do some css via the plugin.

  3. Hi, Nice Plugin. how do i close an already open accordion? is there any internal method that handles that?