jquery - Bootstrap Tabbed Content Not Hiding Properly -
i'm trying bootstrap tab field working , i'm having difficulties.
the content tabbing between each div, i'm running content each tab being displayed on page, hidden. whenever 1 of tabs clicked hides content above, , unhides content below instead of switching properly.
in screenshot below can see content #android-screenshots tab showing beneath content in #ios-screenshots tab causing large amount of unneeded blank space.
here markup looks like:
<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 iphone 4s.</p> <div class="col-sm-4"> <img class="img-responsive" src="${contextroot}/resources/assets/img/mobile-splash/ios_screenshot_01.png" /> </div> <div class="col-sm-4"> <img class="img-responsive" src="${contextroot}/resources/assets/img/mobile-splash/ios_screenshot_02.png" /> </div> <div class="col-sm-4"> <img class="img-responsive" src="${contextroot}/resources/assets/img/mobile-splash/ios_screenshot_03.png" /> </div> <div class="col-sm-4"> <img class="img-responsive" src="${contextroot}/resources/assets/img/mobile-splash/ios_screenshot_02.png" /> </div> <div class="col-sm-4"> <img class="img-responsive" src="${contextroot}/resources/assets/img/mobile-splash/ios_screenshot_03.png" /> </div> <div class="col-sm-4"> <img class="img-responsive" src="${contextroot}/resources/assets/img/mobile-splash/ios_screenshot_01.png" /> </div> </div> </div> <div role="tabpanel" class="tab-pane fade" id="android-screenshots"> <div class="screenshots"> <p class="excerpt text-center">screenshots taken on 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> <div class="col-sm-4"> <img class="img-responsive" src="${contextroot}/resources/assets/img/mobile-splash/android_screenshot_02.png" /> </div> <div class="col-sm-4"> <img class="img-responsive" src="${contextroot}/resources/assets/img/mobile-splash/android_screenshot_03.png" /> </div> <div class="col-sm-4"> <img class="img-responsive" src="${contextroot}/resources/assets/img/mobile-splash/android_screenshot_04.png" /> </div> <div class="col-sm-4"> <img class="img-responsive" src="${contextroot}/resources/assets/img/mobile-splash/android_screenshot_01.png" /> </div> <div class="col-sm-4"> <img class="img-responsive" src="${contextroot}/resources/assets/img/mobile-splash/android_screenshot_01.png" /> </div> </div> </div> <div role="tabpanel" class="tab-pane fade" id="faq"> </div> </div> </div> </div> </div> and javascript looks like:
(function($) { $('.nav-tabs a').on('click', function (e) { e.preventdefault(); $(this).tab('show'); }); })(jquery);
managed resolve adding following css:
.tab-pane:not(.active) { display: none; }
Comments
Post a Comment