[jQuery] tabs collapsed by default on open

[jQuery] tabs collapsed by default on open


Hello everyone. Is there a way to have tabs created in jQuery that are
collapsed when the page loads? I use this:
$(document).ready(function(){
$("#tabs").tabs({ collapsible: true
});
});
to allow the user to click on the tab to collapse it once the page
loads. But how do I get the tab content to be hidden to begin with?
Thanks very much,
Robin
HTML for TABS
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
</ul>


<div id="fragment-1">
Content for tab 1
</div>
<div id="fragment-2">
Content for tab 2
</div>
</div>
CSS for TABS
<style type="text/css">
.ui-tabs { padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { list-style: none; position: relative;
padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { float: left; border-bottom-width: 1 !
important; margin: 0 .2em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none;
padding: .5em 1em; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px;
border-bottom-width: 1; background-color:#ff0000; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav
li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a
{ cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav
li.ui-tabs-selected a { cursor: pointer; } /* first selector in group
seems obsolete, but required to overcome bug in Opera applying cursor:
text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-
width: 1; background-color: #cccccc; float:left; width: 500px; }
.ui-tabs .ui-tabs-hide { display: none !important; }
</style>