how do I use downloaded Themroller on my site? More specificly Tabs

how do I use downloaded Themroller on my site? More specificly Tabs

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.