Button collapses/expands accordions only on second click Bootstrap-CodePudding

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

CodePudding user response：

$( document ).ready(function() {
    $("#collapseAll").click( function() {
            if(!$('.accordion-header').hasClass("active")){
                $('.accordion-header').removeClass("active").addClass("active");

            } else {
                $('.accordion-header').addClass("active").removeClass("active");
            }
        });

});

CodePudding user response：

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