CODEWITHSUNDEEP
javascriptjqueryhtmlcsstabs
user3465571
user3465571

Reputation: 53

Click Tab, Tabs Disappear

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.

Upvotes: 2

Views: 5059

Answers (3)

jsea
jsea

Reputation: 4037

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.

Upvotes: 2

Kelderic
Kelderic

Reputation: 6707

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

});

Upvotes: 2

Josh Rutherford
Josh Rutherford

Reputation: 2723

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 coming from because of the amount of scripts on your page.

Upvotes: 1

Related Questions