Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Collapse
The collapse component provides a flexible way to show and hide content with smooth animations. It enables you to create accordions, expandable panels, and responsive navigation elements that toggle visibility with minimal code. Built on Bootstrap's JavaScript plugin system, collapse components support various trigger types and can be controlled programmatically.
Basic Example
The basic collapse implementation offers two trigger methods: a link with
href attribute pointing to the target ID, and a button using
data-bs-target. Both approaches toggle the same collapsible element, demonstrating
the component's flexibility. The aria-expanded and
aria-controls attributes enhance accessibility.
Horizontal Collapse
The horizontal collapse variant animates width instead of height, creating a side-sliding
effect. Add the collapse-horizontal class alongside collapse to enable
this behavior. The collapsible element should have a defined width (300px in this example) to
control the expansion size.
Multiple Toggles and Targets
Create complex interactions by controlling multiple collapse elements independently or
simultaneously. This example features three triggers: two that control individual collapse
elements and a third that toggles both at once using the .multi-collapse class
selector. This pattern is useful for creating advanced accordion-like interfaces.