Jquery Accordion implementation

Jquery Accordion implementation


Hi there,
This is my first attempt at implementing the Jquery accordion with
ExpressionEngine.
My question is however about basic implementation of the accordion:
My header code:
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load("jquery", "1");
google.setOnLoadCallback(function() {
});
</script>
<script src="{site_url}js/jquery.accordion.js" type="text/
javascript"></script>
<script type="text/javascript">
    jQuery().ready(function(){
        jQuery('#category-menu').accordion({
            active: false,
            header: '.head',
            navigation: true,
            event: 'mouseover',
            fillSpace: true,
            animated: 'easeslide'
        });
        var accordions = jQuery('#category-menu');
        });
    </script>
My body code (borrowed straight from the accordion plugin site):
<ul id="category-menu">
                <li>
                    <a class="head" href="?p=1.1.1">Guitar</a>
                    <ul>
                        <li><a href="?p=1.1.1.1">Electric</a></li>
                        <li><a href="?p=1.1.1.2">Acoustic</a></li>
                        <li><a href="?p=1.1.1.3">Amps</a></li>
                        <li><a href="?p=1.1.1.4.1">Effects A</a></li>
                        <li><a href="?p=1.1.1.4.2">Effects B</a></li>
                        <li><a href="?p=1.1.1.4.3">Effects C</a></li>
                        <li><a href="?p=1.1.1.4.4">Effects D</a></li>
                        <li><a href="?p=1.1.1.5">Accessories</a></li>
                    </ul>
                </li>
                <li>
                    <a class="head" href="?p=1.1.2">Bass</a>
                    <ul>
                        <li><a href="?p=1.1.2.1">Electric</a></li>
                        <li><a href="?p=1.1.2.2">Acoustic</a></li>
                        <li><a href="?p=1.1.2.3">Amps</a></li>
                        <li><a href="?p=1.1.2.4">Effects</a></li>
                        <li><a href="?p=1.1.2.5">Accessories</a></li>
                    </ul>
                </li>
                <li>
                    <a class="head" href="?p=1.1.3">Drums</a>
                    <ul>
                        <li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
                        <li><a href="?p=1.1.3.3">Electronic Drums</a></li>
                        <li><a href="?p=1.1.3.4">Cymbals</a></li>
                        <li><a href="?p=1.1.3.5">Hardware</a></li>
                        <li><a href="?p=1.1.3.6">Accessories</a></li>
                    </ul>
                </li>
            </ul>
But all I get so far is a standard list view:
http://lifelinkinternational.org/index.php/churches-and-partners
Despite the fact that I previously (and successfully) tested it on a
static page prior to bringing into my ExpressionEngine build.
Does anyone have any tips?
Thanks in advance.