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
tofalse
will collapse all panels. This requires thecollapsible
option to betrue
.
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.