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 ...
 

$(".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_")
   });
 }
});

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