Bootstrap Collapse and Accordion

The collapse plugin shows and hides a part of the page with a smooth animation. The accordion is a group of collapse panels where only one is open at a time.

Collapse

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Toggle the content
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">This content is shown and hidden by the button.</div>
</div>

const panel = document.getElementById('collapseExample');
console.log('open at the start: ' + panel.classList.contains('show'));
document.querySelector('[data-bs-toggle="collapse"]').click();
await new Promise(r => setTimeout(r, 600));
console.log('open after the 1st click: ' + panel.classList.contains('show'));
document.querySelector('[data-bs-toggle="collapse"]').click();
await new Promise(r => setTimeout(r, 600));
console.log('open after the 2nd click: ' + panel.classList.contains('show'));

The button (or link) uses data-bs-toggle="collapse" and data-bs-target (or href) with the id of the content. A collapsed content has the class .collapse, and an open one has .collapse.show.

Accordion

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion item 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">The first item is open at the start.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion item 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">The second item.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion item 3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">The third item.</div>
    </div>
  </div>
</div>

Let us click the second item in real Chrome. Because of data-bs-parent, the first item must close:

document.querySelector('[data-bs-target="#collapseTwo"]').click();
await new Promise(r => setTimeout(r, 800));
['collapseOne', 'collapseTwo', 'collapseThree'].forEach(id => {
  console.log(id + ' open = ' + document.getElementById(id).classList.contains('show'));
});

Accordion options

• data-bs-parent="#id" makes it “one open at a time”. Remove it to let many items stay open.
• .accordion-flush removes the outer borders and the rounded corners.
• The class collapsed on the button controls the arrow icon. Add it to every closed item.

Multiple targets and JavaScript

const el = document.getElementById('collapseExample');
const collapse = bootstrap.Collapse.getOrCreateInstance(el, { toggle: false });

collapse.show();
collapse.hide();
collapse.toggle();

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.