Thursday, January 12, 2012

Jquery accordian with multipal open sections

I really liked Accordian plugin from Jquery. Its really nice and easy to use plugin. I wanted to use Accordian but
1. It don't allow multiple section open at once. 
2. I wanted few sections to be always open.
3. Wanted to expand / collapse few section on some event.
4. Official Jquery site also discourage you from using According with multipal open sections. You will find following note on Jquery site.

"NOTE: If you want multiple sections open at once, don't use an accordion"

So instead of using Jquery accordian, I created similar component using basic Jquery effects. I used slideUp, slideDown and slideToggle. Here is jsFiddle which displays all js, html and css. (I am assuming that you have some basic knowledge of Jquery)

In above example I added few extra things like enabling/ disabling input elements within section, expand / collapsing section on selection of checkbox etc.
I have added enough comments in my JS still you can drop comment for any query. Also I created pretty basic UI, you can decorate it to make it look as accordian.



  1. Its great. I am looking for same. Could you please provide jsfiddle link so that I will look into code

    1. I have embedded JsFiddle in my blog which displays Javascript, HTML and CSS.
      You can view Javascript code by clicking on Javascript tab which is next to result tab.