I have this button that collapses/expands all accordions on the page when clicked. The Problem is when I first load the page it will only starting collapsing/expanding everything after I click a second time on the button, then it works on every click.
Button HTML:
<Button id="collapseAll" class="btn btn-secondary">Collapse/Expand</Button>
Button JS:
$("#collapseAll").click( function() {
if(!$('.accordion-header').hasClass("active")){
$('.accordion-header').removeClass("active").addClass("active");
} else {
$('.accordion-header').addClass("active").removeClass("active");
}
});
$( document ).ready(function() {
$("#collapseAll").click( function() {
if(!$('.accordion-header').hasClass("active")){
$('.accordion-header').removeClass("active").addClass("active");
} else {
$('.accordion-header').addClass("active").removeClass("active");
}
});
});
I think the problem is with your css code.
you can add the following css and it should work fine..
.accordion-header{
display:none;
}
.accordion-header.active{
display:block;
}
Validate if it matches your requirement. Also you can refer the link http://accordion-cd.blogspot.com/
$(document).ready(function () {
$("#accordion").accordion({
collapsible:true,
});
var icons = $( "#accordion" ).accordion( "option", "icons" );
$('.open').click(function () {
$('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
'aria-selected': 'true',
'tabindex': '0'
});
$(this).attr("disabled","disabled");
$('.close').removeAttr("disabled");
});
});