jQuery Accordian

Just a quick post on how i implemented a simple Accordian type effect.

Now, given the prevalance of plugins for jQuery etc, why write my own.

Well, firstly the jQuery UI accordian works on divs and i need one which works on 'fieldsets'. Second, I felt like it!

Actually, thats not completely true; as part of a wider framework, i needed 3 behaviours to be easily switchable in pages where forms are layed out in fieldsets:

1. No behviour; all fieldsets are displayed fully and uncollapsed.
2. Optional collapsing; all fieldsets are collapsed on page load, but we can expand more than one at a time.
3. Accordian; all fieldsets are collapsed on page load and only one can be expanded at any one time; i.e. open one, close all others.

So, lets take case 2 (case 1 needs no work!)

Optional Collapsing

Heres a simple snippet of HTML for a page with 3 fieldsets:

   
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>  
   
   ...  
   
   <fieldset>  
     <legend class="optcollapse">Fieldset 1</legend>  
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  
   </fieldset>  
   
   <fieldset>  
     <legend class="optcollapse">Fieldset 2</legend>  
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  
   </fieldset>  
   
   <fieldset>  
     <legend class="optcollapse">Fieldset 3</legend>  
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  
   </fieldset>  
   

So, we include the jQuery library from Google's CDN and then in the body, create 3 fieldsets. All we want to do, is collapse the fieldset when we click on the legend. All we need is a simple bit of JS:

 <script>  
       $(document).ready(function() {  
             $('.optcollapse').each(function(){  
                   $(this).siblings().slideToggle("fast");  
                   $(this).click(function(){  
                         $(this).siblings().slideToggle("slow");  
                   });  
             });  
       });  
 </script>  

Whats this code doing? Firstly, it finds every element with the 'optcollapse' class and a) executes the "slideToggle('fast')" jQuery function on all siblings of the legend and b) sets an "onclick" event handler on each of them to do the same again. "slideToggle" simply expands and collapses an element based on it's state which is just what we need. One thing i could do is futher qualify the selector to be 'legend.optcollapse' just in case but its fine for now. So, why execute "slideToggle" on all the legends siblings? Essentially, the legend is out clickable 'switch' so we need everything in the fieldset collapsed apart from the legend. if we collapsed the legend we'd not have anything to click on to expand the fieldset again.
Having got the above working, we can now move on to the Accordian:

Accordian

This is an extension of above really. as well as controlling the fieldset who's legend we click on we also need to manipulate the other fieldsets inline with the state of the 'clicked on' fieldset. Here's a snippet of our HTML:

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>  
 ...  
 <fieldset class="collapsed">  
       <legend class="collapsible">Fieldset 1</legend>  
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  
 </fieldset>  
 <fieldset >  
       <legend class="collapsible">Fieldset 2 - Open at page load</legend>  
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  
 </fieldset>  
 <fieldset class="collapsed">  
       <legend class="collapsible">Fieldset 3</legend>  
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>  
 </fieldset>  

Ok, so similar to the 'optional' case except the fieldsets have a class and the legend has a slightly different class. And here's our JS:

 <script>  
       $(document).ready(function() {  
             $('.collapsible').each(function(){  
                   $(this).click(function(){  
                         doAccordian($(this).parent());  
                   });  
             });  
             $('.collapsed').children('legend.collapsible').each(function(){  
                   $(this).siblings().slideToggle("fast");  
             });  
       });  
       function doAccordian(fset){  
             if ($(fset).hasClass('collapsed')) {  
                   // open me up..  
                   $(fset).children('legend.collapsible').each(function(){  
                         $(this).siblings().slideToggle("fast");  
                   });  
                   $(fset).removeClass('collapsed');  
                   // close all others ..  
                   $(fset).siblings('fieldset').each(function(){  
                         if (!$(this).hasClass('collapsed')) {  
                               $(this).children('legend.collapsible').siblings().slideToggle("fast");  
                               $(this).addClass('collapsed');  
                         }  
                   });  
             }  
             else {  
                   // close me down..  
                   $(fset).children('legend.collapsible').each(function(){  
                         $(this).siblings().slideToggle("fast");  
                   });  
                   $(fset).addClass('collapsed');  
             }  
       }  
 </script>  

So, what does all this do? On page load, we register an on click event handler to call the 'doAccordian' function, passing the fieldset (the click is on the legend remember). Then, we collapse all the fieldsets marked (by class) as collapsed. Given our HTML above, 'Fieldset 2' will remain expanded as if we were setting a 'default' expanded fieldset.


So, we can now look at 'doAccordian'; this takes the fieldset Object and executes one of two paths

1. Fieldset has a class of 'collapsed', i.e. its already in a collapsed state.Therefore we want to expand it and collapse all other expanded fieldsets. we do this, as above, by using "slideToggle" on the legend's siblings (within the fieldset). Then we remove this fieldsets 'collapsed' class. Finally we look for the fieldset's sibling fieldsets and for those without the 'collapsed' class we collapse them and then add the 'collapsed' class.
2. Fieldset is has no 'collapsed' class (i.e. already open) therefore all we need to do is simply close it

One aside; the reason I used a different class for the legend in each of the 2 behaviours is so that i scould use the 2 side by side in the same site, i.e. some pages will use Accordian behaviour and some will use 'Optional Collapse' behaviour.