aura
Home Aura
aura

Accordion

The accordion component is a container for a list of items that can be toggled open and closed. It has a few different variations described below.

Attributes

  • transition (bool) - The transition of the accordion. Default is false.

Slots

  • default - The content of the accordion.
  • title - The title of the accordion. (Required)

Basic Usage

Copy to clipboard

<aura:accordion>
    <aura:accordion.item title="Lorem ipsum dolor sit amet">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    </aura:accordion.item>

    <aura:accordion.item title="Sed diam nonumy eirmod tempor">
        Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </aura:accordion.item>

    <aura:accordion.item title="At vero eos et accusam">
        At vero eos et accusam et justo duo dolores et ea rebum.
    </aura:accordion.item>
</aura:accordion>

Transition

Copy to clipboard

<aura:accordion transition>
    <aura:accordion.item title="Lorem ipsum dolor sit amet">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    </aura:accordion.item>

    <aura:accordion.item title="Sed diam nonumy eirmod tempor">
        Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </aura:accordion.item>

    <aura:accordion.item title="At vero eos et accusam">
        At vero eos et accusam et justo duo dolores et ea rebum.
    </aura:accordion.item>
</aura:accordion>

Exclusive

By adding an exclusive attribute to the accordion, only one item can be open at a time. Can also be combined with the transition attribute.

Copy to clipboard

<aura:accordion exclusive>
    <aura:accordion.item title="Lorem ipsum dolor sit amet" open>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    </aura:accordion.item>

    <aura:accordion.item title="Sed diam nonumy eirmod tempor">
        Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </aura:accordion.item>

    <aura:accordion.item title="At vero eos et accusam">
        At vero eos et accusam et justo duo dolores et ea rebum.
    </aura:accordion.item>
</aura:accordion>

Open State

By adding an open attribute to an accordion item, it will be open by default.

Copy to clipboard

<aura:accordion>
    <aura:accordion.item title="Lorem ipsum dolor sit amet">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    </aura:accordion.item>

    <aura:accordion.item title="Sed diam nonumy eirmod tempor" open>
        Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </aura:accordion.item>

    <aura:accordion.item title="At vero eos et accusam">
        At vero eos et accusam et justo duo dolores et ea rebum.
    </aura:accordion.item>
</aura:accordion>