CODEWITHSUNDEEP
jquerywordpresstwitter-bootstrapbootstrap-4tabs
Jonathan Gunnell
Jonathan Gunnell

Reputation: 11

Bootstrap tabs not showing content after click

I can't seem to get tabs to work properly on my site. http://mysocalled90sband.com/test

When the page loads, I can see the content under the first tab but when I switch to the second tab all content disappears. Switching back to the first tab shows no content until reload.

This code seems to work elsewhere so I think it must be something not loading properly on my site. jQuery seems to be loading fine (via WordPress) and so is the bootstrap js file (3.3.7). Smooth scrolling with a custom script file and various plug-ins are using jQuery alright on the main page. I've tried deactivating plugins running on other pages of the site but no luck there. Any ideas?

<ul class="nav nav-tabs nav-justified">
  <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="menu1" class="tab-pane fade in active">
    <h3>Menu 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

Upvotes: 0

Views: 1084

Answers (1)

Jonathan Gunnell
Jonathan Gunnell

Reputation: 11

@RajanBeipuri led me to the solution. Thanks.

I had a custom script to allow for smooth scrolling on the main navigation on the home page.

function scrollNav() {
  $('.nav a').click(function(){  
    //Toggle Class
    $(".active").removeClass("active");      
    $(this).closest('li').addClass("active");
    var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    //Animate
    $('html, body').stop().animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 115
    }, 1000);
    return false;
  });
  $('.scrollTop a').scrollTop();
}
scrollNav();

This script was interfering with the tabs since they are also within a nav class. The solution was to add a class to my main navigation on the site and adjust the above script accordingly.

Upvotes: 1

Related Questions