ToggleSlide on Mobile to Desktop fix (prevent to slidetoggle Again n again)

by Faisal Khan Janjua

HTML

<div class="mb">
  <dl>
    <dt><span></span> 1st Portion</dt>
    <dd>Content here with long description.</dd>
    <dt><span></span> 2nd Portion</dt>
    <dd>Content here with long description.</dd>
    <dt><span></span> 3rd Portion</dt>
    <dd>Content here with long description.</dd>
    <dt><span></span> 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;
  display: none;
}
dt span:before{
  content:'+ ';
}
dt span.fopen:before{
  content:'- ';
}

JavaScript

jQuery(document).ready(function(){
  jQuery("dl dt").off("click");
  jQuery("dl dt").on('click', function(){
    jQuery(this).next("dd").slideToggle();
    jQuery(this).find("span").toggleClass('fopen');
  });
  
});