HTML
==========

<div id="menu">
  <ul>
    <li>
      <h3>title</h3>
      <div class="contents"></div>
    </li>
    <li>
      <h3>title</h3>
      <div class="contents"></div>
    </li>
  </ul>
</div>

JS
==========

/** Accordion
********************/

// close all except first 1	
$("#menu li:gt(0) .contents").hide();
$("#menu li:eq(0) h3").addClass('selected');	

// add hover class for ie6
$("#menu h3").hover(function(){
	$(this).addClass('hover');
},
function(){
	$(this).removeClass('hover');
});	

// open/close menu
$("#menu h3").click(function(event) {
	event.preventDefault();		
	
	if($(this).next().is(':hidden')) {			
		$('#menu .contents')
			.slideUp('fast')
			.prev().removeClass('selected');			
		$(this).next()
			.slideDown('fast')
			.end().addClass('selected');
	}
	
	return false;
});

With persistent panel and active class.

Simple Accordion

jQuery