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

by Faisal Khan Janjua

HTML

<div class="categories">
  <div class="catRow">
    <div class="cat-title">
      <h3>Services</h3>   
    </div>
    <div class="cat-content">
      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.
    </div>
  </div>
  <div class="catRow">
    <div class="cat-title">
      <h3>Services</h3>   
    </div>
    <div class="cat-content">
      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.
    </div>
  </div>
  <div class="catRow">
    <div class="cat-title">
      <h3>Services</h3>   
    </div>
    <div class="cat-content">
      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.
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.catRow {
  width: 100%;
  float: left;
}

.cat-title {
  display: block;
  background: #99F;
  cursor: pointer;
  padding: 6px 12px;
  border-bottom: 1px solid #FFF;
}

.cat-title h3 {
  margin: 0;
}

.cat-content {
  padding: 10px;
  display: none;
  background: #9F9;
  margin-left: 50px;
}

JavaScript

jQuery('.categories .catRow:first').addClass('expended').find('.cat-content').slideDown();

jQuery(document).on("click", '.categories .catRow .cat-title', function(){
  var thiselement = jQuery(this).closest('.catRow');
  if(!thiselement.hasClass('expended')){
    jQuery('.categories .cat-content').slideUp();
    jQuery('.categories .catRow').removeClass('expended');
    thiselement.find('.cat-content').slideDown();
    thiselement.addClass('expended');
  }
  else{
    thiselement.removeClass('expended');
    thiselement.find('.cat-content').slideUp();
  }
});