Click Tab, Tabs Disappear

Question

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.com/products/sfn-537

Here's the JSFiddle another guy made of it working: http://jsfiddle.net/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.

Andy Mercer Andy Mercer · Accepted Answer · 2014-04-08T19:31:49

What's Going On

The code used for those tabs is much more complicated 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 accomplish 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();
    });

});