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!!

Answer 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.

Answer 2

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);
    }
});

Answer 3

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

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

Answer 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.

Answer 5

Using Bootstrap:

    //To Expand
    var elem  = $(this).find('.accordionElement');
    elem.addClass("in");
    elem.attr("style","");
    elem.attr("aria-expanded",true);

then you could collapse using:

    var elem  = $(this).find('.accordionElement');
    elem.removeClass("in");
    elem.attr("style","height: 0px;");
    elem.attr("aria-expanded",false);