Collapse component in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the Bootstrap Collapse component?

The Collapse component allows you to show or hide content with a smooth sliding animation, helping to save space and organize information on a webpage.

beginner

Which HTML attribute is used to toggle the Collapse component in Bootstrap?

The data-bs-toggle="collapse" attribute is used on a button or link to toggle the visibility of the target content.

beginner

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

Use the data-bs-target attribute on the button with the CSS selector (like an ID) of the collapsible content, for example data-bs-target="#myCollapse".

beginner

What class must be added to the content element to make it collapsible in Bootstrap?

The content element must have the class <code>collapse</code> to be collapsible. Adding <code>show</code> class makes it visible by default.

intermediate

How can you make multiple Collapse components work as an accordion in Bootstrap?

Wrap the collapsible items in a parent element with id and add data-bs-parent="#parentID" to each collapse content. This makes only one item open at a time.

Which attribute do you add to a button to toggle a Bootstrap Collapse?

A data-bs-target="collapse"

B data-toggle="dropdown"

C data-bs-toggle="collapse"

D data-collapse="toggle"

The correct attribute to toggle a collapse is data-bs-toggle="collapse".

What class should the collapsible content have in Bootstrap?

A collapse-toggle

B collapsible

C toggle-collapse

D collapse

The content must have the collapse class to be collapsible.

How do you make a Collapse component visible by default?

A Add the class <code>show</code> to the collapse content

B Add <code>data-visible="true"</code>

C Add <code>visible</code> attribute

D Add <code>active</code> class to the button

Adding the show class to the collapse content makes it visible initially.

What does the data-bs-parent attribute do in a Collapse accordion?

A Makes the collapse content draggable

B Ensures only one collapse item is open at a time

C Links the collapse to a button

D Changes the collapse animation speed

data-bs-parent groups collapses so only one can be open, creating an accordion effect.

Which Bootstrap version introduced the data-bs-toggle attribute naming?

A Bootstrap 5

B Bootstrap 3

C Bootstrap 4

D Bootstrap 2

Bootstrap 5 uses the data-bs- prefix for its JavaScript data attributes.

Explain how to create a simple Collapse component in Bootstrap that toggles content visibility when a button is clicked.

Think about the button attributes and the classes needed on the content.

Describe how to set up multiple Collapse components so they behave like an accordion, allowing only one open section at a time.

Focus on the data-bs-parent attribute and its effect.