CODEWITHSUNDEEP
htmlbootstrap-4accordion
Paul Holmes
Paul Holmes

Reputation: 143

Bootstrap4 Accordion - Collapse All without use of JavaScript

Here is a code snippet from the Bootstrap4 documentation found at: https://getbootstrap.com/docs/4.0/components/collapse/

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

I am trying to implement a similar Collapse/Expand All functionality in my Bootstrap accordion. I have found that this implementation does not work how I intended it to. This simply changes the state of the panels to the opposite of what it currently is.

For example:

Panel1: Hidden

Panel2: Hidden

Panel3: Hidden

becomes

Panel1: Visible

Panel2: Visible

Panel3: Visible

which is fine but say for example the states are like this:

Panel1: Hidden

Panel2: Visible

Panel3: Hidden

I would expect Collapse/Expand All to either make them all hidden or all visible but it actually becomes:

Panel1: Visible

Panel2: Hidden

Panel3: Visible

Is there a way using Bootstrap4 that I can toggle all panels either on or off?

E:

So if all of my panels to be collapsed have class="multi-collapse", I can collapse them with data-target=".multi-collapse" in my toggle button.

When the panel is collapsed its class is "multi-collapse collapse" and when its visible the class is "multi-collapse collapse show". If I can specify multiple classes for data-target I can make the target EITHER multi-collapse collapse or multi-collapse collapse show depending on a condition... Is there any way I can specify multiple classes for data-target?

Even if there were a way to just collapse every panel in the accordion that would do the trick.

E2:

Got it to do exactly what I wanted thanks to Zim

<input type="button" class="btn btn-primary" data-toggle="collapse" [attr.data-target]="allExpanded ? '.multi-collapse:not(.show)': '.multi-collapse.show'" (click)="allExpanded = !allExpanded" [attr.value]="allExpanded ? 'Collapse All': 'Expand All'" >

This is an Angular project so I was able to keep track of the state of a single button using a boolean variable in the Component file.

Upvotes: 1

Views: 811

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362760

The only way without using JavaScript is to have 2 separate buttons. The data-target would target only open .multi-collapse.show, or closed .multi-collapse:not(.show) panels..

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse:not(.show)">Show all</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse.show">Hide all</button>

Demo

In order to do this with a single button you'd need JS to keep track of the state of the Collapse panels.

Upvotes: 2

Related Questions