[jQuery] tabs collapsed by default on open

[robintrain...@yahoo.com]

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>
   <br>
    <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>