##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# 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.

Basic Collapse Example
Loading...
Basic Collapse Example
Loading...

### 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.

Horizontal Collapse
Loading...
Horizontal Collapse
Loading...

### 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.

Multiple Collapse Controls
Loading...
Multiple Collapse Controls
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates