Can I expand/collapse content of JQuery ui Accordion by click another elements too?

Question

By default, there are headers of contents to control expand/collapse.But in my situation,I could expand/collapse the contents by another elements ,too. For example:

the basic structure of jquery ui accodion code:

<script>
    $(function() {
        $( "#accordion" ).accordion();
    });
    </script>



<div class="demo">

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
......
</div>

and now. I have another elements,just like :

<ul id="another elements can expand/collapse too">
    <li><a href="">  expand/collapse contents of section1 of id=accordion too</a></li>
........
</ul>

thank you very much!!

Solution 1

You can use .activate with false passed in to collapse all elements programmatically. Since you only ever have one element open at a time, this will work to collapse whatever element is open showing that link. This will only work if you have collapsible set to true.

You can pass in what other element you want to expand to expand that element on click.

Solution 2

After update of JQuery UI there is no "active" method on accordion. So, to collapse all accordions use:

$('.accordion').accordion('option', {active: false});

Solution 3

Collapse accordion tab:

$('.accordion').accordion('activate', false );

Expand first accordion tab:

$('.accordion').each(function (idx, item) {
    if ($(item).accordion("option", "active") === false) {
        $(item).accordion('activate', 0);
    }
});

Solution 4

I to had trouble getting the Accordions to collapse/expand after they were initially loaded. To get around this I used:

$('#accordionId h3').click();

...which mimics clicking the header area and will force toggle the activation classes.

Felt like a hack, but it's what worked, Best.

View more solutions

Comments

[Ace]

Thank you. You saved me from fiddling around, and I greatly appreciate your solution.

[Admin]

According to this user's "comment": "activate method has been deprecated since jquery ui 1.9 and removed from 1.10+. More information on it and new syntax can be found at jQuery UI 1.9 Upgrade Guide" That's according to that user though, I haven't taken the time to look into the issue myself.

[mhulse]

This tip worked for me. +1. I just had to change it to this: $('.accordion').accordion('option', 'active', false); for jQuery UI 1.11. Thanks!

[jomofrodo]

Can also collapse a single pane with: $('.accordion').accordion('option,{active:false},idx); -- where 'idx' is your pane number, zero-based.