title: Multiple tabs not working with Jquery
body: <p><a href="http://codepen.io/mohammadhamza/pen/esKCD" rel="nofollow">This is the pen</a> I'm working on and the Jqueryis below.As I want a tab style like each button shows the desire content.</p>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$('.content-canvas').find('div').hide();
  $('.content-canvas div:first-child').show();
  $('.tab-button span:first-child').addClass('active');
  $('.tab-button').find('span').click(function(){
    $('.tab-button').find('span').removeClass('active');
    $(this).addClass('active');
    var currentclass=$('.active').attr('class');
   $('.content-canvas').find('div').each(function(){
      if($(this).attr('class')==currentclass)
      {
        $('.content-canvas').find('div').hide();
        $(this).show();
      }
      else
      {
        $(this).hide();
      }
  });
  });
  </code></pre>