Bootstrap tab dropdown doesn't show after 1st click

Question

In my sample code below, the dropdown tab contents does not show after it's viewed for first time.

 (function($) { $(function() { $('a[data-toggle = "tab"]').on('shown.bs.tab', function(e) { // Get the name of active tab var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text(); $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab); }); }); })(jQuery);

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min:css" rel="stylesheet"> </head> <body> <main class="main"></main> <hr> <p class="active-tab"><strong>Active Tab</strong>: <span></span></p> <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p> <hr> <ul class="nav nav-tabs" role="tablist" id="myTab"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#account-details" aria-controls="Account Details" role="tab" data-toggle="tab">Details</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li> <a href="#d1" data-toggle="tab">D1</a> </li> <li> <a href="#d2" data-toggle="tab">D2</a> </li> </ul> </li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <p>This is the home page</p> </div> <div role="tabpanel" class="tab-pane" id="account-details"> <p>Pane 1</p> </div> <div role="tabpanel" class="tab-pane" id="d1"> <p>Dropdown 1</p> </div> <div role="tabpanel" class="tab-pane" id="d2"> <p>Dropdown 2</p> </div> </div> </main> <.-- Page style--> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery:min.js"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle:min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>

When the active tab becomes one of the dropdown values (D1/D2) and when you change the active tab to any other tab, the Previous Tab: value becomes empty.

Now if I select dropdown 1 again, I don't see the content.

Any feedback is appreciated.

Thank you.

Answer 1

You are mixing up between Bootstrap v3 and v4 which causing this conflict, just remove the v4 one, (Your code is compatible with v3 )

 (function($) { $(function() { $('a[data-toggle = "tab"]').on('shown.bs.tab', function(e) { // Get the name of active tab var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text(); $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab); }); }); })(jQuery);

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <:-- Main --> <main class="main"> <hr> <p class="active-tab"><strong>Active Tab</strong>: <span></span></p> <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p> <hr /> <ul class="nav nav-tabs" role="tablist" id="myTab"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#account-details" aria-controls="Account Details" role="tab" data-toggle="tab">Details</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java<b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li> <a href="#d1" data-toggle="tab">D1</a> </li> <li> <a href="#d2" data-toggle="tab">D2</a> </li> </ul> </li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <p>This is the home page</p> </div> <div role="tabpanel" class="tab-pane" id="account-details"> <p>Pane 1</p> </div> <div role="tabpanel" class="tab-pane" id="d1"> <p>Dropdown 1</p> </div> <div role="tabpanel" class="tab-pane" id="d2"> <p>Dropdown 2</p> </div> </div> </main> <!-- End main -->

Bootstrap tab dropdown doesn't show after 1st click

Question

1 answers

solution1
1 ACCPTED 2020-04-05 06:49:21

Bootstrap tab dropdown doesn't show after 1st click

Question

1 answers

solution1 1 ACCPTED 2020-04-05 06:49:21

solution1
1 ACCPTED 2020-04-05 06:49:21