Activate Tab In Loops Using JQUERY

by harshapache

HTML

<div class="red-btn">
  <img src="/red-btn.png" alt="red button" /> <spam class="red-btn-text" >PUSH ME</spam>
</div>
<div class="container">
  <div class="hp-blurb">                           
11 A gorilla has escaped from the ATLANTA zoo. An ENSEMBLE of zookeepers are trying to find it. In the event the gorilla SHOWS signs of fear it could attack.
  </div>
  <div class="hp-blurb">                           
22 A gorilla has escaped from the ATLANTA zoo. An ENSEMBLE of zookeepers are trying to find it. In the event the gorilla SHOWS signs of fear it could attack.
  </div>
  <div class="hp-blurb">                           
33 A gorilla has escaped from the ATLANTA zoo. An ENSEMBLE of zookeepers are trying to find it. In the event the gorilla SHOWS signs of fear it could attack.
  </div>
</div>

CSS

.hp-blurb{
  display:none;
}
.hp-blurb.active{
  display:block;
}

JavaScript

$('.hp-blurb').first().addClass('active');
var totalHpBlurb = 0;
$('.hp-blurb').each(function(){
totalHpBlurb++;
 $(this).attr('data-index',totalHpBlurb);
})

$('.red-btn').click(function() {
 var index = $('.hp-blurb.active').attr('data-index');
 $('.hp-blurb.active').removeClass('active');
 
 if(index < totalHpBlurb){
  index++;
  $('.hp-blurb[data-index="'+index+'"]').addClass('active');
 }else{
  $('.hp-blurb[data-index="1"]').addClass('active');
 }
});