jQuery UI Accordion as navigation

I'm working on a page navigation using jQuery's accordion UI element. The HTML Structure is this:

<ul id="#accordion">
    <li><a href="tables.php">Tables</a></li>
    <li><a href="charts.php">charts</a></li>
    <li><a href="statistics.php">Statistics</a>
        <ul>
             <li><a href="year1.php">Year 1</a></li>
             <li><a href="year2.php">Year 2</a></l开发者_运维百科i>
        </ul>
    </li>
</ul>

Now when I call the accordion like so

$( "#accordion" ).accordion();

it works... mostly. I click on Statistics, and the Year 1 and Year 2 link scrolls out beautifully. But there are links that has no child element, such as the first two (Tables and Charts). And when clicked there, nothing happens.

This is where I want users who click on the link (Tables and Charts) to go to those respective pages, and people who click on Statistics (links with nested ul) to see the nested ul.

I hope that makes sense.

I don't think you should really use the accordion for navigation - its' purpose is for separating blocks of information on a page, not for redirecting between sections of your site. If you did manage to redirect to another page after clicking on an accordion - when you redirected to the other page the accordion would have to be reset up again etc, it isn't really feasible.

Another thing is that the html markup for the accordion plugin should like this:

<div id="accordion">
    <h3><a href="#">Tables</a></h3>
    <div>Tables content goes here</div>
    <h3><a href="#">Charts</a></h3>
    <div>Charts content goes here</div>
</div>

This is straight from the jQuery docs site.