jQuery tabs not working

Question

I'm trying to implement jQuery tabs to replace AJAX tab container. I've followed the code from the jquery website but my tabs aren't showing up. It just loads the entire page full of data with no tabs. And firebug tells me the following error:

$("#tabs").tabs is not a function

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

I've got references to all the files needed:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

And I've got the function specified as follows:

  <script type="text/javascript">
     $(document).ready(function() {
         $("#tabs").tabs();
     });

  </script>

The code for the tabs are as follows:

div id="tabs">
    <ul>
        <li><a href="#tab-1"><span>Patient Information</span></a></li>
        <li><a href="#tab-2"><span>Medical History 1 of 3</span></a></li>
        <li><a href="#tab-3"><span>Medical History 2 of 3</span></a></li>
        <li><a href="#tab-4"><span>Medical History 3 of 3</span></a></li>
        <li><a href="#tab-5"><span>Scheduler</span></a></li>
        <li><a href="#tab-6"><span>Care Plan</span></a></li>
    </ul> 
<div id="tab-1">
</div>
**Repeats for all tabs through tab-6**
</div>

Can anyone tell me what I'm doing wrong? Since the .tabs() function isn't working the page is just loading like so -

Answer 1

Try loading scripts in this sequence

<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.tabs.js"></script>