How to hide and show twitter bootstrap tabs?

Question

I try to show the hidden tab only when necessary. My current code is as follows:

<ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#data" data-toggle="tab" style="display:none;">New Tab</a></li> </ul> 

JQuery

 $('#data').load('functions/test_function.php', { method: "example"}, function() { $('#data').tab('show'); // $('#data').show(); }) 

Any idea what I'm doing wrong? After code completion, the tab is never displayed.

Answer 1

With this code, you are trying to display the contents of a tab, and even this will not work.

As stated in the doc

each tab must be activated individually

And it needs to be activated in the data-toggle="tab" element, and not in the content.

 $('#data').load('functions/test_function.php', { method: "example"}, function() { var $tab = $('[data-toggle="tab"][href="#data"]'); // OR var $tab = $('#tabID'); $tab.click(function(e) { // Binding for later use (for user interaction) e.preventDefault(); $tab.tab('show'); }); $tab.show(); // Display the tab $tab.tab('show'); // Display the content }) 

You can save the explicit selector [data-toggle="tab"][href="#data"] or set id="tabID" to the hidden tab.