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.

Practice

1. What is the main purpose of the Accordion component in Bootstrap?

easy

A. To create a navigation bar with dropdown menus

B. To show and hide sections of content by expanding or collapsing them

C. To display images in a sliding carousel

D. To style buttons with different colors

Solution

1. Step 1: Understand Accordion functionality

   The Accordion component is designed to toggle visibility of content sections by expanding or collapsing them.

2. Step 2: Compare with other Bootstrap components

   Navigation bars, carousels, and buttons serve different purposes unrelated to content toggling.

3. Final Answer:

   To show and hide sections of content by expanding or collapsing them -> Option B

4. Quick Check:

   Accordion = toggle content visibility [OK]

Hint: Accordion toggles content sections open or closed [OK]

Common Mistakes:

• Confusing Accordion with navigation menus
• Thinking Accordion is for image sliders
• Assuming Accordion styles buttons

2. Which of the following is the correct HTML structure to start an Accordion in Bootstrap 5?

easy

A. <div class='accordion' id='myAccordion'>

B. <accordion id='myAccordion'>

C. <div class='accordion-item'>

D. <section class='accordion-collapse'>

Solution

1. Step 1: Identify the container element for Accordion

   The Accordion container uses a div with class accordion and an ID for reference.

2. Step 2: Check Bootstrap 5 syntax

   Bootstrap 5 requires div.accordion as the wrapper, not accordion tag or other classes like accordion-item or accordion-collapse alone.

3. Final Answer:

   <div class='accordion' id='myAccordion'> -> Option A

4. Quick Check:

   Accordion container = div.accordion [OK]

Hint: Accordion always starts with div.accordion container [OK]

Common Mistakes:

• Using a non-existent <accordion> tag
• Starting with accordion-item instead of accordion container
• Confusing collapse section with container

3. Given this Accordion item code snippet, what will happen when the button is clicked?

<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'>
      Section 1
    </button>
  </h2>
  <div id='collapseOne' class='accordion-collapse collapse show' aria-labelledby='headingOne' data-bs-parent='#myAccordion'>
    <div class='accordion-body'>Content 1</div>
  </div>
</div>

medium

A. The entire accordion will reload the page

B. Nothing will happen because the button lacks a click event

C. The content inside 'Content 1' will collapse or expand when the button is clicked

D. The button will change color but content stays visible

Solution

1. Step 1: Analyze button attributes for toggle

   The button has data-bs-toggle='collapse' and data-bs-target='#collapseOne', linking it to the collapsible content.

2. Step 2: Check the collapsible content state

   The content div has class collapse show, meaning it is visible initially and will toggle on button click.

3. Final Answer:

   The content inside 'Content 1' will collapse or expand when the button is clicked -> Option C

4. Quick Check:

   Button toggles collapse content visibility [OK]

Hint: data-bs-toggle='collapse' toggles content visibility [OK]

Common Mistakes:

• Assuming button does nothing without explicit JS
• Thinking button reloads page
• Confusing color change with content toggle

4. What is wrong with this Accordion code snippet that prevents it from working properly?

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

medium

A. The accordion-collapse div is missing the collapse class

B. The button should not have aria-expanded attribute

C. The data-bs-parent attribute should be on the button, not the collapse div

D. The accordion container is missing an ID

Solution

1. Step 1: Check classes on collapsible content

   The collapsible div must have class collapse to enable Bootstrap's collapse behavior.

2. Step 2: Verify other attributes

   The aria-expanded attribute on the button is correct and data-bs-parent belongs on the collapse div. The container has an ID.

3. Final Answer:

   The accordion-collapse div is missing the collapse class -> Option A

4. Quick Check:

   collapse class missing = no toggle [OK]

Hint: Always add 'collapse' class to collapsible content div [OK]

Common Mistakes:

• Forgetting the 'collapse' class on content div
• Misplacing data-bs-parent attribute
• Removing aria-expanded attribute

5. You want to create an Accordion where only one section can be open at a time, and the first section is open by default. Which combination of attributes and classes achieves this behavior correctly?

hard

A. Add data-bs-single='true' to buttons and expanded attribute on first button

B. Add data-bs-toggle='accordion' to buttons and active class to first button

C. Use data-bs-multiple='false' on accordion container and open class on first item

D. Add data-bs-parent to each collapse div and add show class to the first collapse div

Solution

1. Step 1: Understand Bootstrap's single-open behavior

   Bootstrap uses data-bs-parent on collapse divs to ensure only one section is open at a time.

2. Step 2: Set default open section

   Adding the show class to the first collapse div makes it open by default on page load.

3. Step 3: Evaluate other options

   Attributes like data-bs-toggle='accordion', data-bs-multiple, or data-bs-single do not exist in Bootstrap 5 for this purpose.

4. Final Answer:

   Add data-bs-parent to each collapse div and add show class to the first collapse div -> Option D

5. Quick Check:

   data-bs-parent + show class = single open with default [OK]

Hint: Use data-bs-parent and show class for single open accordion [OK]

Common Mistakes:

• Using non-existent Bootstrap attributes
• Forgetting to add show class for default open
• Misplacing data-bs-parent attribute