Accordion heading not collapsing when list is active

Accordion heading not collapsing when list is active

Hi everyone,

I'm new to jquery - so far so good except for one small problem in my current job.

The website i'm working on is this: http://www.davidvaggphotography.com.au

It's all ready to go, except an issue with the navigation menu. I want Photos to collapse when one of the list items (under Photos when expanded) is active. Currently Photos does collapse when the same-level list items are active, but not its "child list items". I hope it's a simple fix, and something to be customized in my accordion.js file, which I haven't altered.

Below is the code taken from my index page, and my untouched accordion.js code is located here: http://davidvaggphotography.com.au/js/accordion.js. Any help would be great appreciated!

<head>
...
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
<script type="text/javascript">
jQuery().ready(function(){   
    // applying the settings
    jQuery('#theMenu').Accordion({
        active: 'h3.selected',
        header: 'h3.head',
        alwaysOpen: false,
        animated: true,
        showSpeed: 400,
        hideSpeed: 800
    });
});   
</script>
</head>

...

<div id="navigation">
            <ul id="theMenu">
            <li>
                <h3 class="head"><a href="javascript:;">PHOTOS</a></h3>
                <ul class="menu-photos">
                    <li><a href="photos-portraits.html">PORTRAITS</a></li>
                    <li><a href="photos-music.html">MUSIC</a></li>
                    <li><a href="photos-weddings.html">WEDDINGS</a></li>
                    <li><a href="photos-observations.html">OBSERVATIONS</a></li>
                </ul>
            </li>
            </ul>
           
            <ul class="menu-main">
            <li><a href="about.html">ABOUT</a></li>
            <li><a href="http://davidvaggphotography.blogspot.com/" target="_blank">BLOG</a></li>
            <li><a href="shop.html">SHOP</a></li>
            <li><a href="contact.html">CONTACT</a></li>
            </ul>
           
           
</div>