Today 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 
