How do I hide and show twitter bootstrap tabs?

Question

I'm trying to show a hidden tab only when needed. My current code looks like this:

<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? The tab is never displayed after the code completes.

Answer 1

With that provided code you are trying to display the tab content, and even that will not work.

As stated in the doc

each tab needs to be activated individually

And it needs to be activated on the data-toggle="tab" element, not 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 choose to keep the explicit selector [data-toggle="tab"][href="#data"] or set an id="tabID" on the hidden tab.