Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I hide and show twitter bootstrap tabs?

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.

like image 315
user1216398 Avatar asked Feb 20 '23 16:02

user1216398


1 Answers

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.

like image 124
Sherbrow Avatar answered Feb 27 '23 23:02

Sherbrow