I like getting things fast, condensed and straightforward.

Here is an attempt to showcase the power of jQuery when you want to make it quick and simple.
With 2 lines of code (considering jQuery's 'combo-scripting'), I came up with a lightweight but powerfull (I think) accordion.




[update from Dec 14 : Thanking Cedrics ;-)]
A demo of this tutorial can be found at this address :

http://www.aesge.fr/files/tutorials/accordion


You can also download files there :

http://www.aesge.fr/files/tutorials/accordion.zip


The HTML :




Items #1's header


Item #1's content goes here ...



Items #2's header


Item #2's content goes here ...




The JS :

$(".accordion_>.item_>.head_").click(function(){
if(!$(this).hasClass("open_")){
$(this).siblings(".content_").slideDown(function(){
$(this).addClass("open_")
});
$(this).parent().siblings().children(".content_").slideUp(function(){
$(this).removeClass("open_")
});
}
});

The CSS :

.accordion_{
width : 400px;
height : 378px;
background-color : grey;
padding: 10px;
}
.head_ {
padding:4px 0 4px 20px;
}
.content_{
display : none;
}
.open_ >.content_{
display : block;
}