Initiate jQuery UI Tabs with no tabs active and all panels hidden

Question

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!

Answer 1

As Matt suggests in the comments, it is:

$( "#tabs" ).tabs({collapsible: true, active: false });

Example: jsFiddle