Collapsible
An expandable and collapsible content section that reveals or hides its children with smooth height animation. Ideal for progressive disclosure, FAQs, settings panels, and any UI where screen real estate matters.
Live Preview
Click the trigger to expand or collapse the content area. The animation uses Framer Motion for a smooth height transition.
closed1<Collapsible open={open} onOpenChange={setOpen}>2 <CollapsibleTrigger>3 Click to reveal more information4 </CollapsibleTrigger>5 <CollapsibleContent>6 This is the collapsible content area...7 </CollapsibleContent>8</Collapsible>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Collapsible component and its sub-components.
import {
Collapsible,
CollapsibleTrigger,
CollapsibleContent,
} from '@/components/aidash/collapsible';Basic Usage
The simplest collapsible with a title and content. Clicking the trigger toggles the content visibility.
1<Collapsible>2 <CollapsibleTrigger>3 What is Aidash Components?4 </CollapsibleTrigger>5 <CollapsibleContent>6 Aidash Components is a modern, production-ready7 React UI library built with TypeScript...8 </CollapsibleContent>9</Collapsible>Controlled
Control the open/close state externally using the open prop and onOpenChange callback.
1const [open, setOpen] = useState(false);2 3<button onClick={() => setOpen(true)}>Open</button>4<button onClick={() => setOpen(false)}>Close</button>5 6<Collapsible open={open} onOpenChange={setOpen}>7 <CollapsibleTrigger>8 Controlled collapsible section9 </CollapsibleTrigger>10 <CollapsibleContent>11 This collapsible is fully controlled...12 </CollapsibleContent>13</Collapsible>Multiple Collapsibles
Compose multiple collapsibles where only one can be open at a time, creating accordion-like behavior.
1const [activeId, setActiveId] = useState<string | null>(null);2 3const items = [4 { id: 'settings', title: 'Account Settings', content: '...' },5 { id: 'notifs', title: 'Notification Preferences', content: '...' },6 { id: 'privacy', title: 'Privacy & Data', content: '...' },7];8 9{items.map((item) => (10 <Collapsible11 key={item.id}12 open={activeId === item.id}13 onOpenChange={(open) => setActiveId(open ? item.id : null)}14 >15 <CollapsibleTrigger>{item.title}</CollapsibleTrigger>16 <CollapsibleContent>{item.content}</CollapsibleContent>17 </Collapsible>18))}With Icon
Add a rotating chevron icon to visually indicate the open/close state.
1<Collapsible>2 <CollapsibleTrigger>3 <SettingsIcon />4 Application Settings5 <ChevronIcon className="rotate-on-open" />6 </CollapsibleTrigger>7 <CollapsibleContent>8 Configure your application preferences...9 </CollapsibleContent>10</Collapsible>Custom Trigger
Use any element as the collapsible trigger for full design flexibility.
1<Collapsible>2 <CollapsibleTrigger asChild>3 <div className="custom-card-trigger">4 <HelpIcon />5 <div>6 <p>Need help getting started?</p>7 <p>Click to expand the quick-start guide</p>8 </div>9 <ChevronIcon />10 </div>11 </CollapsibleTrigger>12 <CollapsibleContent>13 <div className="guide-content">14 <p>Step 1: Install the package...</p>15 <p>Step 2: Import the component...</p>16 </div>17 </CollapsibleContent>18</Collapsible>Nested Collapsibles
Collapsible sections can be nested inside each other for hierarchical content structures.
1<Collapsible>2 <CollapsibleTrigger>User Management</CollapsibleTrigger>3 <CollapsibleContent>4 <p>Manage user accounts...</p>5 6 <Collapsible>7 <CollapsibleTrigger>Notification Settings</CollapsibleTrigger>8 <CollapsibleContent>9 <ul>10 <li>Email notifications: Enabled</li>11 <li>Push notifications: Disabled</li>12 </ul>13 </CollapsibleContent>14 </Collapsible>15 16 <Collapsible>17 <CollapsibleTrigger>Permission Roles</CollapsibleTrigger>18 <CollapsibleContent>19 <ul>20 <li>Admin: Full access</li>21 <li>Editor: Can create and edit</li>22 </ul>23 </CollapsibleContent>24 </Collapsible>25 </CollapsibleContent>26</Collapsible>Props API
Complete list of props accepted by the Collapsible component.
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled open state |
| defaultOpen | boolean | false | Whether the collapsible is open by default (uncontrolled) |
| onOpenChange | (open: boolean) => void | — | Callback fired when the open state changes |
| disabled | boolean | false | Disable the collapsible trigger |
| children | ReactNode | — | Trigger and content elements |
| className | string | '' | Additional CSS classes for the wrapper |
open and defaultOpen are provided, open takes precedence and the component becomes fully controlled.Accessibility
Built-in accessibility features following WAI-ARIA Disclosure pattern.
aria-expanded
The trigger element includes aria-expanded to communicate the current open/closed state to assistive technologies.
aria-controls
The trigger uses aria-controls to reference the collapsible content panel, establishing a programmatic relationship between trigger and content.
Keyboard Navigation
Toggle the collapsible with Enter or Space when the trigger is focused. Navigate between triggers with Tab. Disabled collapsibles are removed from the tab order.
Content Region
The content panel uses role="region" so screen readers can identify it as a distinct landmark when expanded.
1<div>2 <button3 aria-expanded="true"4 aria-controls="collapsible-panel-1"5 >6 Trigger Label7 </button>8 <div9 id="collapsible-panel-1"10 role="region"11 >12 Collapsible content...13 </div>14</div>Related
Other components that complement the Collapsible pattern.