bellhop by actabl

Components

search
Accordion
App Bar
Avatar
Avatar Stacked
Badge
Badge Dot
Breadcrumbs
Button
Button Icon
Card
Checkbox
Checkbox Group
Container
Data Grid
Date Picker
Date Range Picker
Dropdown
Empty State
Illustrations
Input Autocomplete
Input Number
Input Password
Input Text
Input Verification
Loader Spinner
Logo Box
Modal
Notification
Page Navigation
Pagination
Popover
Product Switcher
Property Switcher
Radio Button
Sidebar
Skeleton Loader
Tabs
Tag
Textarea
Toggle
Tooltip

Accordion

Accordions are vertically stacked lists of headers that reveal or hide associated content sections.

We offer a 30-day return policy for all unused items in their original packaging. To initiate a return, please contact our customer service team with your order number.

Standard shipping takes 5-7 business days. Express shipping is available for 2-3 business day delivery. International shipping times vary by destination.

Yes, we ship to over 50 countries worldwide. Shipping costs and delivery times vary based on destination. You can see the exact shipping cost at checkout.

Once your order ships, you'll receive an email with a tracking number. You can use this number to track your package on our website or the carrier's website.

When to use

Use accordions to help users navigate and manage large amounts of content in a limited space.

FAQ Sections

Perfect for organizing frequently asked questions where users can expand only the questions relevant to them.

Content Organization

Use when you need to display multiple related sections of content in a limited vertical space.

Progressive Disclosure

Ideal for revealing additional details or advanced options that users may not need immediately.

Form Sections

Group related form fields together in expandable sections to reduce visual clutter.

When not to use

  • When all content should be visible at once—display it inline instead
  • For navigation—use tabs or a sidebar menu for better clarity
  • When there are only 1-2 items—the accordion adds unnecessary complexity
  • For critical information that users must see—don't hide it in collapsed sections

Anatomy

Accordions consist of a container with expandable items, each containing a header and content panel.

Here goes the content for Section 1.

Here goes the content for Section 2.
  1. Container

    The wrapper that holds all accordion items

  2. Item Header

    Clickable header text that controls expansion/collapse

  3. Expand/Collapse Icon

    Visual indicator showing the current state (chevron icon)

  4. Content Panel

    Hidden/visible area containing the detailed content

Types

Accordions support different expansion modes to control how items can be opened.

Single Mode

Only one item can be expanded at a time. Opening a new item automatically closes the previously opened one.

Content here...

Content here...

Multiple Mode

Multiple items can be expanded simultaneously, allowing users to view several sections at once.

Content here...

Content here...

All Collapsed

All items start in a collapsed state, letting users choose which sections to expand.

Content here...

Content here...

With Disabled Item

Individual items can be disabled to prevent interaction while remaining visible.

Content here...

Content here...

Interaction

Accordions respond to user clicks with smooth expand/collapse animations and visual feedback.

Click to Expand

Clicking a collapsed item header expands the content panel with a smooth animation.

Click to Collapse

Clicking an expanded item header collapses the content panel (if collapsible mode is enabled).

Keyboard Navigation

Users can navigate between items using Tab and activate expansion with Enter or Space.

Disabled State

Disabled items show reduced opacity and do not respond to clicks or keyboard input.

Placement

Accordions work well in various contexts where vertical space is limited.

Sidebar Navigation

Use in sidebars to organize hierarchical navigation or filter options.

Main Content Area

Place in the main content area for FAQ pages, help documentation, or feature descriptions.

Settings Panels

Group related settings together in collapsible sections for better organization.

Mobile Layouts

Particularly useful on mobile devices where vertical space is premium.

Accessibility

Accordions are built with accessibility in mind, following WAI-ARIA accordion pattern guidelines.

Keyboard Support

  • Tab: Move focus between accordion item headers
  • Enter/Space: Expand or collapse the focused accordion item
  • Arrow Keys: Navigate between accordion items (optional)

ARIA Attributes

  • aria-expanded: Indicates whether the accordion item is expanded or collapsed
  • aria-controls: Associates the header button with its content panel
  • aria-disabled: Marks disabled items as non-interactive
  • role="region": Defines the content panel as a landmark region

Screen Reader Support

  • Headers are announced as buttons with their expansion state
  • Content panels are associated with their triggering headers
  • Disabled items are announced as unavailable

Focus Management

  • Clear focus indicators on accordion headers
  • Focus remains on the header after expanding/collapsing
  • Disabled items are excluded from keyboard navigation

Resources

Design and development resources for the Accordion component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →