Accordion

A lightning:accordion component displays vertically stacked sections of content that you can expand and collapse. Click a section's header to expand its content. Users can control how much content is visible at once, and don't need to scroll as much to see the content of a page.

Accordion sections are not lazy loaded. Content in sections that are collapsed initially are available on load in the DOM.

To create an accordion section, nest a lightning:accordionSection component within lightning:accordion. Each lightning:accordionSection can contain HTML markup or Lightning components.

This component implements styling from accordion in the Lightning Design System.

To additionally style this component, use the Lightning Design System classes in Utilities.

By default, only one section can be open at a time. Close a section by opening another section. You can configure the accordion to allow multiple sections to be open, and then the sections can be opened and closed by clicking section headers.

You can specify one or multiple active sections. Active sections are expanded when the component loads. The terms "active", "expanded", and "open" are used interchangeably in this documentation.

Lazy loading is not currenty supported. The content you load in inactive sections also impact your page load time.

The first accordion section is expanded by default. To change the default, provide a section name using the activeSectionName attribute. The section name is case-sensitive.

This example creates a basic accordion with three sections, where section B is expanded by default. Only one accordion section is expanded at a time.

If two or more sections use the same name and that name is also specified as the activeSectionName, the first section with that name is expanded by default.

To specify multiple expanded sections, set allowMultipleSectionsOpen to true and pass in an array of accordion section names to activeSectionName. If you don't pass in a section name, all sections are closed by default.

When the open sections change, use the onsectiontoggle handler to find out which sections are active.

This example displays the name of the active section.

To return a list of active sections, use event.getParam('openSections'). This client-side controller returns a list of active sections with a whitespace following each comma.

The openSections event parameter returns an array of strings.

• If allowMultipleSectionsOpen is true, openSections returns an array of strings. For example, if sections B and C are opened, openSections returns ['B', 'C']. If none of the accordion sections include a name value, openSections returns an empty array and openSections.length returns 0 when any number of accordion sections are opened.
• If allowMultipleSectionsOpen is false, openSections returns an array with a single string. For example, if section B is opened, openSections returns ['B'] and openSections.length returns 1.

An accordion section without a name value or a name value that contains an empty string is excluded from the openSections array. If only this accordion section is opened, openSections returns an empty array and openSections.length returns 0.

To expand a section using JavaScript, pass in the section name using activeSectionName.

This example expands section B when the Expand Section B button is pressed.

The onclick handler on the button sets the active section name, which opens the section programmatically.

To expand multiple sections programmatically, set allowMultipleSectionsOpen to true and pass in an array of section names instead.

You can nest lightning:accordion components inside lightning:accordionSection components to create multiple levels in the accordion. The chevron icon is used for all sections and levels.

lightning:accordion implements the SLDS accordion blueprint, which follows the WAI-ARIA Authoring Practices for the accordion pattern. In addition to the keyboard interaction guidelines on the WAI-ARIA site, you can use the Left Arrow and Right Arrow key to move focus from an accordion header to the next or previous. The Home and End keys are not used for keyboard interaction on lightning:accordion.

lightning:accordion observes these roles, states, and properties.

• When you set activeSectionName to expand specific sections, the button on those section headers have aria-expanded set to true.
• An accordion section sets aria-hidden to true if the section is collapsed, which hides the content from assistive technologies.