Accordion Section

A lightning:accordionSection defines the content of an accordion section inside a lightning:accordion component. Each section 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.

This example creates a basic accordion with three sections, where section B is expanded by specifying it with the activeSectionName attribute in lightning:accordion.

1<aura:component>
2  <lightning:accordion activeSectionName="B">
3    <lightning:accordionSection label="Accordion Title A" name="A"
4      >This is the content area for section A</lightning:accordionSection
5    >
6    <lightning:accordionSection label="Accordion Title B" name="B"
7      >This is the content area for section B</lightning:accordionSection
8    >
9    <lightning:accordionSection label="Accordion Title C" name="C"
10      >This is the content area for section C</lightning:accordionSection
11    >
12  </lightning:accordion>
13</aura:component>

This example creates the same basic accordion with an added buttonMenu on the first section. The button menu is included in the actions attribute, which makes it display on the section header.

1<aura:component>
2  <lightning:accordion>
3    <lightning:accordionSection label="Accordion Title A" name="A"
4      >This is the content area for section A
5      <aura:set attribute="actions">
6        <lightning:buttonMenu aura:id="menu" alternativeText="Show menu">
7          <lightning:menuItem value="New" label="Menu Item One" />
8        </lightning:buttonMenu>
9      </aura:set>
10    </lightning:accordionSection>
11    <lightning:accordionSection label="Accordion Title B" name="B"
12      >This is the content area for section B</lightning:accordionSection
13    >
14    <lightning:accordionSection label="Accordion Title C" name="C"
15      >This is the content area for section C</lightning:accordionSection
16    >
17  </lightning:accordion>
18</aura:component>

Use the label attribute to provide optional header text for an accordion section. When the header text is too long to display in the viewport, the text is truncated and displayed with an ellipsis. On desktop, you can hover with the mouse to see the full text.

To expand or collapse a section, click the toggle button or header text.

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

lightning:accordionSection renders the toggle button and title in a <button> element. When a section is expanded, the button renders with aria-expanded="true". When a section is collapsed, the button renders with aria-expanded="false".

To expand or collapse a section using the keyboard, press the Tab key to set focus on the toggle button or header text and press Enter.

To set the aria-level value on the section header, pass in a number from 1 to 6 on the headingLevel attribute.

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

• The button on a section header displays the label you provide to the label attribute.
• The button on a section header assigns aria-controls to the ID of the element that contains the accordion section content. This attribute sets a relationship between the button and the element with the accordion section content. When the button is clicked, the element with the content specifies either aria-hidden="true" or aria-hidden="false" depending on whether the content is visible or not.