Creating tabs in jQuery. When you click another tab, all the tabs disappear. Can't figure out the fix

Here's the page not working:

Here's the JSFiddle another guy made of it working: / I've copied and pasted every element of this into the page and the issue is still there.

One person pointed out that something is giving the tabs the css "display:none" when clicked and I can't find where to fix it.

Also, another observation someone made was that "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('act‌​ive');" when you click a tab".

Here's the jQuery code I have:

     $(document).ready(function() {
    $('ul.tabs').each(function(){
      var active, content, links = $(this).find('a');
      active = links.first().addClass('active');
      content = $(active.attr('href'));
      links.not(':first').each(function () {
        $($(this).attr('href')).hide();
      });
      $(this).find('a').click(function(e){
        active.removeClass('active');
        content.hide();
        active = $(this);
        content = $($(this).attr('href'));
        active.addClass('active');
        content.show();
        return false;
      });
    });
  });

And the code from the working JSFiddle:

    $(document).ready(function() {

$('ul.tabs').each(function(){
  var active, content, links = $(this).find('a');
  active = links.first().addClass('active');
  content = $(active.attr('href'));
  links.not(':first').each(function () {
    $($(this).attr('href')).hide();

  });
  $(this).find('a').click(function(e){
    active.removeClass('active');
    content.hide();
    active = $(this);
    content = $($(this).attr('href'));
    active.addClass('active');
    content.show();
    return false;
      alert('yep');
  });
});
});

Any help/guidance is greatly appreciated.

Creating tabs in jQuery. When you click another tab, all the tabs disappear. Can't figure out the fix

Here's the page not working: http://www.sleepfullnights./products/sfn-537

Here's the JSFiddle another guy made of it working: http://jsfiddle/gravitybox/7pHg4/ I've copied and pasted every element of this into the page and the issue is still there.

One person pointed out that something is giving the tabs the css "display:none" when clicked and I can't find where to fix it.

Also, another observation someone made was that "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('act‌​ive');" when you click a tab".

Here's the jQuery code I have:

     $(document).ready(function() {
    $('ul.tabs').each(function(){
      var active, content, links = $(this).find('a');
      active = links.first().addClass('active');
      content = $(active.attr('href'));
      links.not(':first').each(function () {
        $($(this).attr('href')).hide();
      });
      $(this).find('a').click(function(e){
        active.removeClass('active');
        content.hide();
        active = $(this);
        content = $($(this).attr('href'));
        active.addClass('active');
        content.show();
        return false;
      });
    });
  });

And the code from the working JSFiddle:

    $(document).ready(function() {

$('ul.tabs').each(function(){
  var active, content, links = $(this).find('a');
  active = links.first().addClass('active');
  content = $(active.attr('href'));
  links.not(':first').each(function () {
    $($(this).attr('href')).hide();

  });
  $(this).find('a').click(function(e){
    active.removeClass('active');
    content.hide();
    active = $(this);
    content = $($(this).attr('href'));
    active.addClass('active');
    content.show();
    return false;
      alert('yep');
  });
});
});

Any help/guidance is greatly appreciated.

• javascript
• jquery
• html
• css
• tabs

Share Improve this question Follow asked Apr 8, 2014 at 19:14 user3465571user3465571 5322 silver badges88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I'm the one who noted "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('act‌​ive');"

It breaks there because that line is what is hiding the ul containing the tabs.

Looking at your website's code, you need to change the following inside app.js on Line 39.

$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');

to this:

$(contentLocation).show().addClass('active').siblings('div').hide().removeClass('active');

You only want to target the div siblings of the selected tab's content div. Right now, the ul is also a sibling of the selected div. Without the 'div', siblings() will select all of its siblings and hide() them (thus hiding the tabs too).

Preferably, I would add a tab-content class to the tab content div elements and use siblings('.tab-content') instead of siblings('div') to be more specific. That way if you add another div that happens to be a sibling, it won't hide that.

What's Going On

The code used for those tabs is much more plicated than you need, and I'm not really sure what is breaking. Rather than try to fix it, it would be easier to just start over. This is what you want:

Every time a user clicks on a tab, all tabs have the active class removed, and all content is hidden. Then, the active clicked on tab is given the active class and it's content is shown. This should seem instantaneous to the user. You will need to add a class to your content divs to acplish this easily. I'd add tab-content.

Code

Working Fiddle

HTML (Only change is adding the class)

<div class="tab-content" id="tab-1">
    ...Content...
</div>

<div class="tab-content" id="tab-2">
    ...Content...
</div>

<div class="tab-content" id="tab-3">
    ...Content...
</div>

Javascript:

$(document).ready(function() {

    $('.tabs li a').click(function(event){
        event.preventDefault();
        $('.tabs li a').removeClass('active');
        $(this).addClass('active');
        $('.tab-content').hide();
        $($(this).attr('href')).show();
    });

});

It's definitely a problem with the ul getting display: none. You could try overriding it in the click handler with $('ul.tabs').css('display','block'). It's hard to tell where the issues is ing from because of the amount of scripts on your page.