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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With