Simple usability styling of jQuery accordion

The recipe is simple, jQuery and definition list = simple accordion. The idea is to create a user friendly accordion.

To reach this I think we need a few things:

Make it clear were you need to click to open the accordion
Automatically close so we keep only one open at the same time
set up different styles for the mouse
Degrade gracefully if javascript turned off

Have a look at the demo page for the final result: Accordion Demo

First things first, the html:

<dl id="news">
<dt><span>Title one</span></dt>
<dd>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut viverra enim sed justo. Nulla tincidunt, dui vitae dictum vestibulum, ante
purus convallis augue, id vehicula urna purus a dolor. Vivamus justo nibh, porta a, suscipit ac, scelerisque euismod, urna. Nullam eget
tellus. Donec auctor dolor in tortor. Vivamus tristique porta eros.

As usual, we use the wonderful definition list that seems to have been created just for accordions. The default css will be pretty simple as well.

#news
{
width:249px;
background:#aebecd;
}

#news dt
{
background:#eee url(dtBg.png) bottom left;
color:#555;
height:30px;
padding-left:40px;
line-height:30px;
cursor:pointer;
}

#news dd
{
padding:10px;
}

The background image on the dts is set up so it doesn’t shows the “+” but the opened state. We’ll see why later. Note the use off the sliding doors technique or also called css sprites widely used nowadays.

And then the javascript that will call jQuery to do the magic:

$(document).ready(function()
{
//use javascript to close the divs so if deactivated the divs will still be visible
$("#news dd").hide();

//set the background to display the +
$("#news dt").css(‘background-position’,‘top left’);

//Show the first dd on page opening
$("#news dd:first").show();
//set the background to open
$("#news dt:first").css(‘background-position’,‘bottom left’);

//when click on the dt: close every previous opened dd, change their style, open the next children (dd), change its background.
$("#news dt").click(function()
{
if(!$(this).next().is(‘:visible’)) {
$("#news dd").slideUp(‘normal’);
$("#news dt").css(‘background-position’,‘top left’).css(‘cursor’,‘pointer’);
}
$(this).css(‘background-position’, ‘bottom left’).css(‘cursor’,‘auto’).next().slideDown("normal");
});

});

So, the background change when you click on a link so see which title you’ve clicked on and then the cursor style is set to auto so you don’t feel clicking again to close the dd.

Now when you click on an other title, the previous opened slides up and its background is reset to the + along with the cursor to display a hand. It’s very simple so why do we see so many ugly accordion that don’t make any sense? And of course if you turn off javascript there is no trace of the accordion because there is no point to see it.

Related Items and Services:
Kitchen Doors available here