Simple jQuery Accordion tutorial
20 MarToday I will show you how you can do a small and very simple – yet powerful – accordion script.
The html code is very basic and consist in a standard DL/DT/DD structure:
1 2 3 4 5 6 7 | <dl class="ntzAccordion"> <dt>Title</dt> <dd>Content</dd> <dt>Another title</dt> <dd>Another content</dd> </dl> |
Because is very possible to want to use this kind of accordion in many places, i did a small function:
1 2 3 4 5 6 7 8 9 10 | function ntzAccordion(e) { $(e).find('dd').hide(); $(e).find('dt').bind('mouseover click', function(){ if($(e).find('dd').is(':animated') || $(this).next('dd').is(':visible')) {return false;} $(e).find('dt.opened').removeClass('opened'); $(e).find('dd:visible').slideUp('slow'); $(this).next('dd').slideDown('slow').end().addClass('opened'); }); $(e).find('.active').trigger('click'); };//ntzAccordion |
Of course, we don’t forget to call this function on page load:
1 2 3 | $().ready(function(){ ntzAccordion($('.ntzAccordion')); // we call function with DL selector as parameter }); |
Let’s see how is made
1. We find all DD’s inside of the e variable (which is $('.ntzAccordion')) and we hide them;
2. We bind mouse over and click events on DT. You can have both or none of them (you can use almost all events available on javascipt); Also, we will reffer to current DT as $(this);
3. If there is a DD which is hiding or showing in that moment, we return false. This way you can avoid odd behaviour and jumps;
3.1. Also, we check to see if the ‘victim’ (DD) is visible. Again, if this is visible, we return false to avoid repetitive close/open of DD;
4. We remove .opened class from all DT elements. We use this class to be able to add/change different style for different states of DT;
5. If there is an opened DD, we close it.
6. Because we use a structure like DT/DD, the next element right after DT is… a DD (doh!). We slide down that DD and we return back to DT (using .end()) and add the ‘opened’ class. It’s the exactly the one that we remove few steps above;
7. If you want to have a default element that is opened on page load, this line will do the trick: we trigger an event that is binded few lines above.
8. You sit back and enjoy
Attention!
For some reasons that I think is a jQuery bug, you need to add one for those extra CSS for DD’s:
- float:left;clear:left
- position:relative
- height:ZZpx;
- width:ZZpx
If you don’t do this way and the DD have padding/margin, you will have a weird (and annoying too!) jump when the accordion expands or contract.
Also, don’t forget to view source on demo page


