jQuery Forum

I'm very new to learning jQuery (and coding in general) don't really understand the lingo so please be patient with me if I don't seem to not understand something you're saying or what I'm not able to convey what I'm trying to say. Thank you for any help you may be able to offer.

I recently downloaded a custom theme from the jQuery Themeroller and want to add tabs to my site try as I might; I just cant get them to work properly. My code seems to be right because I compared it to the example code here . Here is my code:

1.     <div id="tab">
   <ul>
           <li><a href="#fragment-1"><span>Hour 1</span></a></li>
           <li><a href="#fragment-2"><span>Hour 2</span></a></li>
           <li><a href="#fragment-3"><span>Hour 3</span></a></li>
       </ul>
        <div id="fragment-1">
       <p><strong>Click this tab again to close the content pane.</strong></p>
       This is content for Hour 1
       </div>  
   <div id="fragment-2">
       <p><strong>Click this tab again to close the content pane.</strong></p>
       This is content for Hour 2
       </div>
    <div id="fragment-2">
       <p><strong>Click this tab again to close the content pane.</strong></p>
       This is content for Hour 3
       </div>
       </div>
   
   <script> $(function() {
    $( "#tab" ).tabs({
   collapsible: true
   });
   });
   </script>

Here is the result I get w/ my code; the tabs appear and are appear to be selectable but the content seems to be "outside the content area" or remaining unchanged as I click from tab to tab.