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

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 2

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

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