I'm using jQuery UI Tabs in a project. I'm wondering if there's an easy way to have all the panels hidden when the document loads, until a tab is clicked. By default jQuery UI starts with an activated tab and the corresponding panel visible. I know you can specify which tab to have active initially, but I'd like to have no tabs active and no panels displayed at the start.
My code is pretty straightforward:
<div id="tabs">
<ul>
<li><a href="#faq1">Link 1</a></li>
<li><a href="#faq2">Link 2</a></li>
<li><a href="#faq3">Link 3</a></li>
</ul>
<div class="faq-panel" id="faq1">
<!-- content -->
</div>
<div class="faq-panel" id="faq2">
<!-- content -->
</div>
<div class="faq-panel" id="faq3">
<!-- content -->
</div>
</div>
And the jQuery is standard:
$( "#tabs" ).tabs();
So everything is working as it should right now, I just want to make this one tweak. I've searched and searched but I haven't seen any documentation on this. Thanks!
As Matt suggests in the comments, it is:
$( "#tabs" ).tabs({collapsible: true, active: false });
Example: jsFiddle
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