CODEWITHSUNDEEP
jqueryhtml
Hamza Dhamiya
Hamza Dhamiya

Reputation: 1287

Multiple tabs not working with Jquery

This is the pen I'm working on and the Jqueryis below.As I want a tab style like each button shows the desire content.

Jquery

$('.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();
    }
});
});

Upvotes: 0

Views: 99

Answers (1)

psycho brm
psycho brm

Reputation: 7664

  1. You are missing dot in front of class active

    var currentclass = $('.active').attr('class');

  2. Also, if you do alert(currentclass) it will show you that it says something like "content2 active". Probably not what you expect. You could go with data-name="content2". And then you select with:

    var currentname = $('.tab-button .active').data('name');
$('.content-canvas [data-name="'+currentname+'"]').show().siblings().hide();

Upvotes: 1

Related Questions