Simplest Accordion jQuery Script (Collapse all but this)

by Faisal Khan Janjua

HTML

<div class="mb">
  <dl>
    <dt>1st Portion</dt>
    <dd>Content here with long description.</dd>
    <dt>2nd Portion</dt>
    <dd>Content here with long description.</dd>
    <dt>3rd Portion</dt>
    <dd>Content here with long description.</dd>
    <dt>4th Portion</dt>
    <dd>Content here with long description.</dd>
  </dl>
</div>

CSS

dd, dt{
  width:100%;
  float:left;
  display:block;
  padding:6px 10px;
}
dt{
  background:#99F;
  cursor:pointer;
  border-bottom:1px solid #FFF;
}
dd{
  background:#9F9;
}

JavaScript

jQuery('.mb dl dd').hide();
	jQuery('.mb dl dt:first').addClass('active').next('dd').show();
	jQuery('.mb dl dt').on("click", function(){
		var thiselement = jQuery(this);
		if(!thiselement.hasClass('active')){
			jQuery('.mb dl dd').slideUp();
			jQuery('.mb dl dt').removeClass('active');
			thiselement.next('dd').slideDown();
			thiselement.addClass('active');
		}
	});