Skip to Navigation
Skip to Navigation

Accordions

Markup | Source | Edit

An accordion allows a user to toggle the display of sections of content. The accordion component wraps accordion panels that can be selected and expanded. It accepts children to define the content displayed within.

Interactive Examples

Base

Need more examples? Find a bug?

For even more examples, please take a preview of our development environment built on the popular Storybook platform that is an always up-to-date deploy of this repository's master branch. All example code on this page can be found in the /components/accordion/__examples__/ folder. Storybook example code can be found in /components/accordion/__docs__/storybook-stories.jsx.

Property Details

All public, supported component props are listed below. If you believe there is a clearer way to describe a property, please submit a pull request. Property descriptions are built from source code comments (written in Markdown) located within propTypes objects which are typically found in each component's index.jsx. Pull requests to update these descriptions can easily be done without cloning this repository by clicking "Edit this file" in the Github user interface.

NameTypeRequiredDefaultDescription
classNameunion

CSS class names to be added to the accordion component. Tested with snapshot testing.

idunion

HTML id for accordion component. Tested with snapshot testing.

childrennode

The panel content for the Accordion component. Accordion panels should be added as . Event handler for the accordion panels should be added to <AccordionPanel />. Optional panelContentActions component may be passed as prop. Tested with Mocha framework and snapshot testing.

Example:

<SLDSAccordion>
  <SLDSAccordionpanel />
  <SLDSAccordionpanel />
  <SLDSAccordionpanel />
</SLDSAccordion>

Related Sub-Components

Panel

The panel content for the Accordion component.

Property Details

NameTypeRequiredDefaultDescription
childrennode

The panel content for the Accordion component. Accordion panels should be added as . Event handler for the accordion panels should be added to <AccordionPanel />. Optional panelContentActions component may be passed as prop. Tested with Mocha framework and snapshot testing.

expandedbool

Indicates whether item is expanded or not, which should be handled by onTogglePanel. Tested with Mocha framework and snapshot testing.

idunion

Id of the item belonging to this panel. Tested with snapshot testing.

panelContentActionsnode

Component that can be passed as prop to <Panel />. As an example, a menu dropdown could be used here to handle additional actions for each accordion panel. Tested with Mocha framework.

onKeyDownSummaryfunc

Callback that will run whenever there is a keydown on the panel button. Function doesn't change the state of the component.

onTogglePanelfunc

Callback that will run whenever a panel is toggled. Function should handle state to toggle expanded prop. Tested with Mocha framework.

refsshape

Ref callback that will pass in panel's input tag

summaryunion

Summary in the span element in the header of this panel. The summary is truncated and so the title element should contain the full text so that it is accessible on hover. Tested with snapshot testing.

titlestring

HTML title attribute. Tested with snapshot testing.