从其他控件关闭折叠面板（手风琴）

Question

I am trying to close and disable the accordion from a click event of a label.

When clicking the label. the accordion should be disabled and closed. I can make it disabled by using addClass method

$('#c5').addClass('ui-state-disabled');

<div class="accordionHeader">
    <h3 id="c5">Advance Settings (C5)</h3>
    <div class="accordionContent">my content</div>
</div>

For closing the accordion I tried using

$('#c5').prop('active',false);
$('#c5').attr('active',false);

neither one works.

I do not want to use before I have to call this from other control

$(".accordionHeader").accordion({
    header: "h3",
    collapsible: true,
    active: false
});

Answer 1

From the API Documentation :

Setting active to false will collapse all panels. This requires the collapsible option to be true .

So, using the following HTML,

<div class="accordionHeader">
     <h3 id="c5">Advance Settings (C5)</h3>
     <div class="accordionContent">my content</div>
</div>
<label id='c5label'>Disable accordion <input type="checkbox" /></label>

this JS will start the accordion and close/disable on the first click on the label `#c5label':

<script>
jQuery(document).ready(function($) {
    $(".accordionHeader").accordion({ collapsible: true });
    $('#c5label').click(function(){
        if( $( ".accordionHeader" ).accordion( "option", "active") === false )
            return;

        $('#c5').addClass('ui-state-disabled');
        $( ".accordionHeader" ).accordion( "option", "active", false );
    });
});
</script>