# Accordion

Accordion component consists of 2 subcomponents: Accordion and AccordionItem.

# Accordion component

Accordion component is used as container and manager which registers AccordionItem items.

# AccordionItem component

AccordionItem component is used to register an item in accordion. This component has the following slots:

  • default (opens new window) slot which is used to render title of accordion button
  • body slot which is used to render the contents of accordion item

# Simple accordion

Accordion header 1
Accordion header 2
Accordion header 3
<accordion>
    <accordion-item>
        Accordion header 1
        <template slot="body">
        Accordion body content 1
        </template>
    </accordion-item>
    <accordion-item>
        Accordion header 2
        <template slot="body">
        Accordion body content 2
        </template>
    </accordion-item>
    <accordion-item>
        Accordion header 3
        <template slot="body">
        Accordion body content 3
        </template>
    </accordion-item>
</accordion>

# Accordion with only one active AccordionItem

When always-one boolean property is provided to Accordion component, it will always show only one actvive AccordionItem. If one item is displayed, if user clicks on another item, all other items will collapse.

Accordion header 1
Accordion header 2
Accordion header 3
<accordion always-one>
    <accordion-item>
        Accordion header 1
        <template slot="body">
        Accordion body content 1
        </template>
    </accordion-item>
    <accordion-item>
        Accordion header 2
        <template slot="body">
        Accordion body content 2
        </template>
    </accordion-item>
    <accordion-item>
        Accordion header 3
        <template slot="body">
        Accordion body content 3
        </template>
    </accordion-item>
</accordion>

# Props

name default description type
alwaysOne false If always-one property is added as true then only one accordion item will be open at a time. Others will be closed when new is enabled. Boolean