I am currently struggling to make a Bootstrap tab field function correctly, encountering some obstacles along the way.
While the content is successfully tabbing between each div, the issue I'm facing is that the content from each tab is actually being displayed on the page but hidden. Therefore, when a tab is clicked, it simply hides the content above and reveals the content below instead of switching properly.
In the image provided below, you can observe the content from the #android-screenshots tab appearing beneath the content in the #ios-screenshots tab, resulting in unnecessary blank space.
https://i.sstatic.net/X7vN3.png
This is how my markup is structured:
<div id="mobile-splash-faq-screenshots" class="container-fluid">
<div class="row">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#ios-screenshots" aria-controls="ios-screenshots" role="tab" data-toggle="tab">iOS Screenshots</a></li>
<li role="presentation"><a href="#android-screenshots" aria-controls="android-screenshots" role="tab" data-toggle="tab">Android Screenshots</a></li>
<li role="presentation"><a href="#faq" aria-controls="faq" role="tab" data-toggle="tab">FAQ</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="container">
<div role="tabpanel" class="tab-pane active fade in" id="ios-screenshots">
<div class="screenshots">
<p class="excerpt text-center">Screenshots taken on an iPhone 4S.</p>
<div class="col-sm-4">
<img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_01.png" />
</div>
// Additional images here...
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="android-screenshots">
<div class="screenshots">
<p class="excerpt text-center">Screenshots taken on a Google Nexus 6.</p>
<div class="col-sm-4">
<img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_01.png" />
</div>
// Additional images here...
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="faq">
</div>
</div>
</div>
</div>
</div>
As for my JavaScript implementation, this is how it looks:
(function($) {
$('.nav-tabs a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
})(jQuery);