Collapse and accordion

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Collapse and accordion—the ideas, syntax, and habits you need before moving on in Bootstrap.

Bootstrap patterns appear constantly in legacy apps and rapid admin UI work.

You will apply Collapse and accordion in contexts like: Internal tools, WordPress themes, Laravel apps, and teams that want opinionated UI without writing every rule from scratch.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Collapse hides and reveals content with a height transition. Triggers use data-bs-toggle="collapse" and point at a target id via data-bs-target or href. The collapsible region needs classes collapse and optionally show for default-open state.

Accordion pattern

Wrap multiple panels in accordion; each item pairs a accordion-header button with an accordion-collapse region. Set data-bs-parent on collapses so only one section opens at a time—essential for FAQ and settings screens.

Progressive enhancement

Content remains in the DOM when collapsed (unless you lazy-load). Ensure headings remain keyboard-focusable and that aria-expanded on toggles reflects state for assistive tech.

Self-check

Which attribute links a button to the panel it opens?
What does data-bs-parent enforce in an accordion?
Which class keeps a collapse visible on first paint?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

collapse vs accordion—when each?
What markup does the toggler need?

No discussion yet. Be the first to ask a question.