Product Page Tabs Not Staying

Question

I installed product page tabs to my website and they look great, until you click on one of the other tabs and the tabs themselves disappear. The content in the Shipping tab is updated and I'll be putting the product reviews from the bottom of the page into the Reviews tab once I can figure out how to get the tabs to stay there when you click between them. I'm not sure what the problem is.

Here's the link to a product page and the on-page jQuery and CSS code is below.

http://www.sleepfullnights.com/products/sfn-537

jQuery:

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

CSS:

<style>
ul.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
}
ul.tabs li a {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #F5F5F5;
  border-color: #DDDDDD !important;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  display: block;
  font-size: 13px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 20px;
  text-decoration: none;
  width: auto;
  color: #303030;
  border-bottom:none !important;
}
ul.tabs li a.active {
  background: none repeat scroll 0 0 #FFFFFF;
  border-left-width: 1px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #111111;
  height: 30px;
  margin: 0 0 0 -1px;
  padding-top: 4px;
  position: relative;
  top: -4px;
}
ul.tabs li:first-child a.active {
  margin-left: 0;
}
ul.tabs li:first-child a {
  border-top-left-radius: 2px;
  border-width: 1px 1px 0;
}
ul.tabs li:last-child a {
  border-top-right-radius: 2px;
}
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
ul.tabs:after {
  clear: both;
}
</style>

When clicking the tabs something is giving your tabs class the CSS property display:none; — Scott
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('active');" when you click a tab — jsea

Sia Sia · Accepted Answer · 2014-04-08T00:44:32

It seems like your code is working, but the JS you posted was missing a closing parentheses and bracket.

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

Here's the working jsfiddle: http://jsfiddle.net/gravitybox/7pHg4/

Product Page Tabs Not Staying

1 Answers