Simplest Accordion jQuery Script (All Collapseable but on start first visible)

by Faisal Khan Janjua

HTML

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

CSS

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

JavaScript

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