简体   繁体   中英

close a collapse panel(accordion) from other control

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

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM