Initiate jQuery UI tabs without active tabs and hidden panels

Question

I am using jQuery UI tabs in a project. I am wondering if there is an easy way to hide all panels when loading a document until a tab is clicked. By default, the jQuery user interface starts with the activated tab and the corresponding panel is displayed. I know that you can specify which tab will be active, but I would like the tabs not to be active, and the panels do not appear at the beginning.

My code is pretty simple:

<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 jQuery is standard:

 $( "#tabs" ).tabs(); 

So, everything works as it is now, I just want to make this setting. I searched and searched, but I did not see any documentation on this. Thanks!

Answer 1

As Matt says in the comments, this is:

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

Example: jsFiddle