Create an accordion with three items

Description: Make an accordion with three items. The first is open at the start, and opening another one must close the first.

Hint:

• Use accordion, accordion-item, accordion-button and data-bs-parent.

---

Solution

<div class="accordion" id="acc">
  <div class="accordion-item">
    <h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#a1" aria-expanded="true" aria-controls="a1">Item 1</button></h2>
    <div id="a1" class="accordion-collapse collapse show" data-bs-parent="#acc"><div class="accordion-body">Text of item 1</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="#a2" aria-expanded="false" aria-controls="a2">Item 2</button></h2>
    <div id="a2" class="accordion-collapse collapse" data-bs-parent="#acc"><div class="accordion-body">Text of item 2</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="#a3" aria-expanded="false" aria-controls="a3">Item 3</button></h2>
    <div id="a3" class="accordion-collapse collapse" data-bs-parent="#acc"><div class="accordion-body">Text of item 3</div></div>
  </div>
</div>

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

How it works

• data-bs-parent="#acc" connects the items, so Bootstrap closes the others.
• After the click on item 3, only item 3 is open.

Read Collapse and Accordion.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.