Bootstrap 5 TutorialLesson 21Free preview

BS5 Collapse

This lesson is part of Bootstrap · All levels

Summary

Collapse hides or displays content blocks seamlessly, commonly used for accordion menus or FAQ sections. The triggers use data-bs-toggle="collapse" and data-bs-target that points to the destination content id. The .collapse class hides content and .show marks the content as it is open.

Key points

Data-bs-toggle="collapse" on the trigger activates this feature.
Data-bs-target or href attribute indicates the content id to be folded.
The class hides the content; the class opens it. (.show)
The class was used by Bootstrap during the animation. (.collapsing)
Two-way triggers can be created with two buttons pointing at the same target.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.