I get asked how to make a Javascript accordion all the time, and there are a lot of great framework plugins and code snippets around, but most of the time the features that these plugins include just aren’t needed. So, here is just about the most basic Javascript accordion you could make, using just a few lines of jQuery and plain old HTML/CSS. It will degrade when Javascript isn’t available, and the example validates to XHTML 1.1 (as I hope it would, with so little code). The jQuery goes a little like this:
-
$(function() {
-
$(‘.accordion .items’).hide();
-
$(‘.accordion .heading’).mouseover(function() {
-
$(this).
-
next(‘.items’).
-
slideDown(‘fast’).
-
siblings(‘.items’).
-
slideUp(‘fast’);
-
});
-
});
Of course, I don’t recommend you just use this example verbatim – apart from the fact that it looks horrible, there are usability issues surrounding doing the accordion effect straight up like this. For a start, I’d recommend looking into the great hoverIntent jQuery plugin so things don’t get crazy on your users.
The example is below, and you can grab the code here: Simple jQuery Accordion Example.
Continue Reading