Bootstrap 在按鈕單擊時折疊所有手風琴

Question

有沒有辦法通過單擊按鈕來折疊/展開所有手風琴？ 我嘗試了一個簡單的按鈕，即 removeClass active 和 addClass active，但它根本不起作用。 我只能一次將它們全部打開，但不能再次崩潰然后再次打開。

我當前的按鈕：

$("#collapseAll").click( function() {
        $(".accordion-header").removeClass("active").addClass("active");
    });

我的js：

$('.js-accordion dt, .js-toggle').on('click tap', function(){
        $($(this).data('target') ? $(this).data('target') : $(this)).toggleClass('active');
    });

和我的 html

<dl class="accordion js-accordion" data-toggle="accordion-header">
      {{#each accordion}}
        <div id="{{anchor}}-div">
          <dt class="accordion-header{{#if active}} active{{/if}}">
            <h3 class="accordion-item-title"{{#if anchor}} id="{{anchor}}"{{/if}}>{{{title}}}</h3>
            <span class="accordion-item-icon"></span>
          </dt>
          <dd class="accordion-body">
            <div class="accordion-item-content">
              {{#if textblock}}
              {{#each textblock}}
              <p>{{{.}}}</p>
              {{/each}}
              {{/if}}
              <p>{{#if anchor}}<a href="#{{anchor}}" class="faq-anchor">{{../../page-contents.section-main.texts.permalink}}</a>{{/if}}</p>
              <p><a href="#top">{{../../page-contents.section-main.texts.to_top}}</a></p>
            </div>
          </dd>
        </div>
      {{/each}}
      </dl>

Answer 1

我用這段代碼自己做的

$("#collapseAll").click( function() {
        let button = document.getElementById("collapseAll");
        if(!$('.accordion-header').hasClass("active")){
            $('.accordion-header').removeClass("active").addClass("active");
            button.innerHTML = 'Collapse all'

        } else {
            $('.accordion-header').addClass("active").removeClass("active");
            button.innerHTML = 'Expand all'
        }
    });

還可以更改按鈕文本！