Jquery UI Accordion - Collapsed & Clickable Links

I am attempting to use the Jquery UI accordion as a Side Navigation option. The problem is I am unable to have the accordion totally collapsed on load (and when desired by user) and to have active links on some of the pannel headers.

Using Jquery 1.6.2 & Jquery UI 1.8.16.

$(function() {
$( "#accordion" ).accordion({
    active: false,
    collapsible: true,
    aut开发者_JS百科oHeight: false,
});
});

<div id="accordion">
<h3><a href="http://link1.html">Outside Link 1</a></h3>
<div></div>
<h3><a href="http://link2.html">Outside Link 2</a></h3>
<div></div>
<h3><a href="http://link3.html">Outside Link 3</a></h3>
<div></div>

<h3><a href="#">More Info</a></h3>
<div class="subNav">
    <ul>
    <li><a href="pageLink1.html">Another Page 1</a></li>
    <li><a href="pageLink2.html">Another Page 2</a></li>
    <li><a href="pageLink3.html">Another Page 3</a></li>
    </ul>
</div>

     <h3><a href="http://link4.html">Outside Link 4</a></h3>
<div></div>

<h3><a href="#">More Info 2</a></h3>
<div class="subNav">
    <ul>
    <li><a href="pageLink4.html">Another Page 4</a></li>
    <li><a href="pageLink5.html">Another Page 5</a></li>
    <li><a href="pageLink6.html">Another Page 6</a></li>
    </ul>
</div>
   ...etc
   </div>

"Outside Links" should link to other pages directly. "More Info & More Info 2" should open up so the user can choose "Another Page" respectively.

I am not able to collapse the accordion on load or if clicked if I change the header selector (I can access the "Outside Links" this way). Could my empty divs be the culprit?

Any help is appreciated. Thanks in advance.

You're in luck. someone made a plugin for this.

http://www.i-marco.nl/weblog/jquery-accordion-3/# It works like you want it to.