Custom accordion with jquery

index.html

<div id='accordian-panel'>
  <h3 class="accordian-title">Product Details</h3>
  <div class='accordian-body'>SOME CONTENT HERE</div>
  <h3 class="accordian-title">Questions & Answers</h3>
  <div class='accordian-body'>SOME CONTENT HERE</div>            
</div>

<script type="text/javascript">
//On click any <h3> within the container
$('#accordian-panel .accordian-title').click(function(e) {
	if($(this).hasClass('active')){
	  $(this).removeClass('active');      
	}else{
	  $('#accordian-panel .accordian-title').removeClass('active');
	  $(this).addClass('active');      
	}
	  //Close all <div> but the <div> right after the clicked <a>
	  $(e.target).next('div').siblings('div').slideUp('fast');
	  //Toggle open/close on the <div> after the <h3>, opening it if not open.
	  $(e.target).next('div').slideToggle('fast');
});
</script>

<style type="text/css">
.accordian-title { 
    border:1px solid #666; 
    padding: 10px; 
    cursor: pointer;
}
div.accordian-body { 
    background-color: #ccc; 
    padding:10px; 
    display:none; 
}
</style>