Multiple compareable Collapsable accordion

by Faisal Khan Janjua

HTML

<div class="newWrapper">

<div class="subscriberCard">
  <h4>Card 1</h4>
  <div class="collapseable">
    <div class="header">
      <h4>1 Click Me</h4>
    </div>
    <div class="body">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
    </div>
  </div>
  <div class="collapseable">
    <div class="header">
      <h4>2 Click Me</h4>
    </div>
    <div class="body">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
    </div>
  </div>
  <div class="collapseable">
    <div class="header">
      <h4>3 Click Me</h4>
    </div>
    <div class="body">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
    </div>
  </div>
</div>

<div class="subscriberCard">
  <h4>Card 2</h4>
  <div class="collapseable">
    <div class="header">
      <h4>1 Click Me</h4>
    </div>
    <div class="body">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
    </div>
  </div>
  <div class="collapseable">
    <div class="header">
      <h4>2 Click Me</h4>
    </div>
    <div class="body">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
    </div>
  </div>
  <div class="collapseable">
    <div class="header">
      <h4>3 Click Me</h4>
    </div>
    <div class="body">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
    </div>
  </div>
</div>

<div class="subscriberCard">
  <h4>Card 3</h4>
  <div class="collapseable">
    <div class="header">
      <h4>1 Click Me</h4>
    </div>
    <div class="body">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
    </div>
  </div>
  <div class="collapseable">
    <div class="header">
      <h4>2 Click Me</h4>
    </div>
    <div...

CSS

.subscriberCard{
  width:33%;
  float:left;
  min-height:174px;
  border:1px solid #ddd;
}
.subscriberCard > h4{
  text-align:center;
}
.collapseable{
  padding:4px;
  border:1px solid #ddd;
}
.collapseable .body {
  display:none;
}
.trigger{
  cursor:pointer;
}
h4{
  margin:0;
  background:#DDD;
  position:relative;
}
.header h4:after{
  position:absolute;
  content:'-';
  right:0;
}
.trigger h4:after{
  content:'+';
}
p{
  margin:0;
}

JavaScript

$(document).ready(function() {

  jQuery('.subscriberCard').each(function(){
  	$(this).find('.header').addClass('trigger');
		$(this).find('.collapseable:first').find('.header').removeClass('trigger');
		$(this).find('.collapseable:first').find('.body').show();
  });
  
  $(".header h4").on('click', function(){
    var wrapper = $(this).closest(".newWrapper");
    var test =wrapper.find(".collapseable");
    var itsIndex = $(this).closest(".collapseable").index();
    test.each(function(){
      if($(this).index()==itsIndex){
        $(this).find(".body").slideDown();
        $(this).find(".header").removeClass('trigger');
      }
      else{
        $(this).find(".body").slideUp();
        $(this).find(".header").addClass('trigger');
      }
    });
  });
  
});