Bootstrap collapse all accordions on button click

lorijames95

Is there a way to collapse/expand all accordions with a button click? I tried it with a simple button that removeClass active and addClass active but it did not work at all. I can only open them all up at once but not collapse again and then open up again.

my current button :

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

my js:

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

and my 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>
lorijames95

I did it by myself with this code

$("#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'
        }
    });

also with changing button text!

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Bootstrap Navbar collapse button not working on click

How to show a bootstrap collapse div on button click?

Clicking on a radio button explicitly coded to close all bootstrap accordions opens them all instead

Why is .click() and on("click") behaving differently on a bootstrap collapse button?

Modify Twitter Bootstrap collapse plugin to keep accordions open

Accordions collapse by default in mobile and expanded by default in desktop Bootstrap 3 responsive

bootstrap accordions with inner accordion with different shown.bs.collapse events

Multiple bootstrap collapse panel opens at one button click

Collapse button is showing but not working after click in bootstrap 3.3 and jquery 1.1

How to collapse all the nested Accordions if clicked on its parent Accordion?

SwiftUI: Is there a way to collapse only one button on click and not all of them

Bootstrap collapse on radio button

button collapse to the right in Bootstrap

Bootstrap 4 Expand All / Collapse All button doesn't work when collapse element already showing

Bootstrap Collapse - Expand All

Twitter Bootstrap button click to toggle expand/collapse text section above button

Expand and collapse Relativelayout by button click

bootstrap panel with button - collapse issue

Bootstrap 4 collapse button is not visible

jQuery Bootstrap Nested Accordions: How to collapse child items when parent is closed

bootstrap collapse not show all demo

Toggle button collapse not working in Bootstrap navbar in bootstrap

javascript bootstrap-multiselect get all selected values on button click

how to make click button in bootstrap and all data are come API

How to collapse the ExpansionTile on button click? - Flutter

Collapse (close) Menu in SidebarMenu of Shinydashboard on button click

click on an expand & collapse button selenium cucumber eclipse

On click stopPropagation while keeping bootstrap collapse behavior

Simulate a click to open Bootstrap collapse element

TOP Ranking

HotTag

Archive