开发者

Jquery UI Accordion - Collapsed & Clickable Links

开发者 https://www.devze.com 2023-04-08 23:09 出处:网络
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 lin

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消