Accordion component in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does the Bootstrap Accordion component manage which panel is open?

In Bootstrap's Accordion component, how is it ensured that only one panel is open at a time?

A By using the <code>data-bs-parent</code> attribute to link all accordion items to the same parent container.

B By adding the <code>active</code> class to the open panel manually in JavaScript.

C By setting the <code>aria-expanded</code> attribute to true on all panels.

D By using CSS <code>:hover</code> selectors to show and hide panels.

💡 Hint

Think about how Bootstrap knows which panel to close when another opens.

Bootstrap uses the data-bs-parent attribute on collapse elements to group them. This attribute points to the accordion container, so when one panel opens, others close automatically.

📝 Syntax

intermediate

Identify the correct HTML structure for a Bootstrap Accordion item

Which option shows the correct HTML structure for a single item inside a Bootstrap Accordion?

A

<div class="accordion-item">
  <h2 class="accordion-header" id="headingOne">
    <button class="accordion-button" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Accordion Item #1
    </button>
  </h2>
  <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
    <div class="accordion-body">
      Content for item 1.
    </div>
  </div>
</div>

B

<div class="accordion-item">
  <button class="accordion-header" id="headingOne">
    <h2 class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
      Accordion Item #1
    </h2>
  </button>
  <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne">
    <div class="accordion-body">
      Content for item 1.
    </div>
  </div>
</div>

C

<div class="accordion-item">
  <h2 class="accordion-header" id="headingOne">
    <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" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
    <div class="accordion-body">
      Content for item 1.
    </div>
  </div>
</div>

D

<div class="accordion-item">
  <h2 class="accordion-header" id="headingOne">
    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      Accordion Item #1
    </button>
  </h2>
  <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
    <div class="accordion-body">
      Content for item 1.
    </div>
  </div>
</div>

💡 Hint

Check the attributes and element order carefully.

Option C uses the correct Bootstrap 5 attributes: data-bs-toggle and data-bs-target, proper element nesting, and the show class on the open panel.

❓ rendering

advanced

What will be the visual result of this Accordion code snippet?

Given this Bootstrap Accordion snippet, what will the user see when the page loads?

Bootsrap

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        Item 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Content 1
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
        Item 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Content 2
      </div>
    </div>
  </div>
</div>

A The second accordion item is open showing 'Content 2', the first is closed.

B Both accordion items are open showing 'Content 1' and 'Content 2'.

C Both accordion items are closed, no content is visible.

D The first accordion item is open showing 'Content 1', the second is closed.

💡 Hint

Look for the show class and aria-expanded values.

The second item has the show class on its collapse div and aria-expanded="true" on its button, so it is open. The first item is collapsed and closed.

❓ selector

advanced

Which CSS selector targets only the open accordion panels?

You want to style only the open panels of a Bootstrap Accordion. Which CSS selector will select only the visible content panels?

A .accordion-collapse.collapse

B .accordion-item > .accordion-header

C .accordion-button[aria-expanded="false"]

D .accordion-collapse.collapse.show

💡 Hint

Open panels have a special class added by Bootstrap.

Bootstrap adds the show class to the .accordion-collapse.collapse element when it is open. So selecting .accordion-collapse.collapse.show targets only open panels.

❓ accessibility

expert

What is the role of ARIA attributes in Bootstrap Accordion buttons?

Bootstrap Accordion buttons use ARIA attributes like aria-expanded and aria-controls. What is their main purpose?

A They prevent keyboard users from interacting with the accordion buttons.

B They provide screen readers information about the button state and which content it controls, improving accessibility.

C They enable Bootstrap's JavaScript to toggle the accordion panels automatically.

D They are used only for styling the button when it is expanded or collapsed.

💡 Hint

Think about users who rely on assistive technologies.

ARIA attributes like aria-expanded tell screen readers if the button controls an open or closed panel. aria-controls links the button to the panel it toggles. This helps users with disabilities understand the accordion's state.