Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
Components Accordion

Accordion

 Overview API Examples Style Tokens

The Accordion component is an interactive element that organizes content into collapsible panels, allowing users to show or hide information as needed.

Basic usage

The Accordion component consists of a wrapper lmn-accordion that contains one or more lmn-accordion-panel elements.

Component anatomy

Allow Multiple Expanded Panels

Controls whether multiple panels can be expanded simultaneously.

Negative State

Applies a negative styling variant for error or warning states.

Show Divider

Adds visual separation between panels.

Toggle Position

Controls the position of the expand/collapse button (start or end).

Accessibility

ARIA Roles and Attributes

The Accordion component implements a semantic structure where the main wrapper acts as a list, with each panel being a list item. The content within each panel is grouped appropriately. Every interactive element, particularly the expand/collapse buttons, carries the necessary ARIA attributes to communicate their state and purpose to assistive technologies.

Keyboard Navigation

Users can navigate through the accordion using their keyboard. The Tab key moves focus between panel headers, while Enter or Space toggles the panel's state. For easier navigation between panels, users can use the arrow keys to move sequentially through the accordion structure.

Focus Management

Visual indicators clearly show which element has keyboard focus at any time. When expanding or collapsing panels, focus is maintained in a logical position to prevent disorientation. In cases where panels contain complex content, focus is appropriately managed to ensure users don't get trapped in expanded sections.

Screen Reader Support

When panels are opened or closed, screen readers announce the change in state. Each expandable section is clearly labeled, helping users understand the content structure. The relationship between headers and their associated content is properly conveyed through ARIA attributes, ensuring a coherent experience for screen reader users.

Best Practices for Developers

  1. Custom Headers DEMO HERE

  2. Dynamic Content Loading DEMO HERE

  3. Error States DEMO HERE

  4. Content Updates DEMO HERE

Previous
Theme
Next
Avatar