jQuery UI tabs not working with Wordpress

Question

This theme I found seems to be using jQuery UI tabs but they're not working...

header.php has:

<link type="text/css" href="<?php bloginfo('template_url'); ?>/css/ui-lightness/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> 

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-ui-1.8.4.custom.min.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.2.min.js"></script>

according to the theme I'm using, the tabs are in sidebar-1.php, so I have this code:

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

<div class="tab">
    <ul>
        <li class="active"><a href="#tabs-1">Welfare Services</a></li>
        <li><a href="#tabs-2">Education Services</a></li>
        <li><a href="#tabs-3">Social Enterprise</a></li>
    </ul>
    <div id="tabs-1">Tab 1 content</div>
    <div id="tabs-2">Tab 2 content</div>
    <div id="tabs-3">Tab 3 content</div>
</div>

the site at www.wickedflava.com/ps the tabs are just below the Flash header (Information Technology etc) but they don't work for some reason. any help would be appreciated!

Answer 1

Use Firebug or Safari Web Dev to look at the javascript errors you're getting. Looks like you're loading jQuery UI before the main jQuery library.

Answer 2

You're loading tabs and UI before jQuery. Just add this line of PHP any time before wp_head():

wp_enqueue_script( 'jquery-ui-tabs' );

That will take care of all the dependencies and make sure it all loads in the correct order.

EDIT:

Also, remove those script tags. Leave the stylesheet, though.