Accordion component in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an Accordion component in web development?

An Accordion is a UI element that lets users expand and collapse sections to show or hide content. It helps organize information in a small space.

beginner

Which Bootstrap class is used to create the main container for an Accordion?

The class .accordion is used as the main container for grouping accordion items in Bootstrap.

intermediate

How do you make an Accordion item collapsible in Bootstrap?

Use the data-bs-toggle="collapse" attribute on the button or link that controls the item, and connect it to a .collapse element with a unique ID.

intermediate

What role does the aria-expanded attribute play in an Accordion?

It tells screen readers if the Accordion section is open (true) or closed (false), improving accessibility.

intermediate

How can you ensure only one Accordion item is open at a time in Bootstrap?

Set the same data-bs-parent attribute on each collapsible content element, pointing to the Accordion container. This makes them behave like an exclusive group.

Which Bootstrap class wraps all Accordion items?

A .collapse

B .accordion

C .accordion-item

D .accordion-header

The .accordion class is the main container for all Accordion items.

What attribute do you add to a button to toggle Accordion content?

A data-bs-toggle="collapse"

B data-toggle="accordion"

C aria-hidden="true"

D data-bs-target="accordion"

Use data-bs-toggle="collapse" to make the button toggle the collapsible content.

How do you link a button to the content it controls in Bootstrap Accordion?

A Using href or data-bs-target with the content's ID

B Using class names only

C Using aria-label only

D No linking is needed

The button uses href="#id" or data-bs-target="#id" to connect to the collapsible content.

What does setting data-bs-parent do in an Accordion?

A Changes the Accordion color

B Allows multiple items open simultaneously

C Disables the Accordion

D Makes only one item open at a time

It ensures only one Accordion item is open by linking all collapsible items to the same parent.

Which attribute improves Accordion accessibility for screen readers?

A id

B data-bs-toggle

C aria-expanded

D class

aria-expanded tells screen readers if the section is open or closed.

Explain how to build a basic Accordion component using Bootstrap.

Think about the structure and attributes needed for toggling.

Describe how accessibility is handled in a Bootstrap Accordion.

Focus on attributes that help screen readers understand the Accordion state.