Accordion

Click the accordions below to expand/collapse the accordion content

Examples

const Example = () => {
const [openState, setOpenState] = React.useState<string>('AccordionItemExample1');

return (
    <Accordion open={openState} toggle={setOpenState}>
        <AccordionItem id="AccordionItemExample0">
            <AccordionHeader
                slot={
                    <>
                        <Link href="/">Link</Link>
                        <Pill color="danger">3</Pill>
                    </>
                }
            >
                Accordion Header #0
            </AccordionHeader>
            <AccordionContent>{content}</AccordionContent>
        </AccordionItem>
        <AccordionItem id="AccordionItemExample1">
            <AccordionHeader slot={<Pill color="danger">3</Pill>}><Icon UNSAFE_className="mr-400" name="EmotionHappy" /> Accordion Header #1</AccordionHeader>
            <AccordionContent>{content}</AccordionContent>
        </AccordionItem>
        <AccordionItem id="AccordionItemExample2">
            <AccordionHeader>Accordion Header #2</AccordionHeader>
            <AccordionContent>{content}</AccordionContent>
        </AccordionItem>
        <AccordionItem id="AccordionItemExample3">
            <AccordionHeader slot={<Pill color="danger">3</Pill>}>Accordion Header #3 | In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam posuere lacus quis dolor. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim.</AccordionHeader>
            <AccordionContent>{content}</AccordionContent>
        </AccordionItem>
    </Accordion>
);
};

{% set content %}
    Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae curabitur odio leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at sem, mauris aenean aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus ultricies sollicitudin ligula. Sem proin, nibh maximus donec nec commodo molestie nulla sapien nec commodo, commodo et fermentum et. Mauris posuere, mi orci et nisi et iaculis lorem fringilla sed mauris auctor, lorem tempus a pulvinar felis scelerisque. Suscipit vivamus, elit vel arcu lorem fringilla finibus quis sit amet ligula convallis, consectetur potenti aenean efficitur.
    Non suspendisse, maximus suscipit tortor non mauris bibendum felis scelerisque bibendum, nam augue scelerisque non nulla. Erat nec, integer nec egestas integer consequat cursus sed porttitor, dolor sit amet lorem ipsum consectetur porta. Condimentum urna, suspendisse mauris ligula duis id vivamus quis odio eget, integer ornare fermentum et vehicula. Consequat bibendum, dui fusce gravida iaculis urna integer vitae id, ante purus nullam et nisl. Accumsan arcu, nunc nulla faucibus purus vivamus facilisis augue, volutpat convallis eget suscipit. Tellus nunc ut enim et, urna fusce pulvinar fusce et mauris donec, vitae odio morbi risus aliquet. et.
{% endset %}
{% set slotContent %}
    <Pill color="selected">3</Pill>
{% endset %}

<Accordion>
    <AccordionItem id="AccordionItemExample0">
        <AccordionHeader id="AccordionItemExample0Header" for="AccordionItemExample0Content" UNSAFE_slot="{{ slotContent }}">
            Accordion Header #0
        </AccordionHeader>
        <AccordionContent id="AccordionItemExample0Content" labelledById="AccordionItemExample0Header">
            {{ content }}
        </AccordionContent>
    </AccordionItem>
    <AccordionItem id="AccordionItemExample1">
        <AccordionHeader id="AccordionItemExample1Header" for="AccordionItemExample1Content">
            Accordion Header #1
        </AccordionHeader>
        <AccordionContent id="AccordionItemExample1Content" labelledById="AccordionItemExample1Header">
            {{ content }}
        </AccordionContent>
    </AccordionItem>
    <AccordionItem id="AccordionItemExample2">
        <AccordionHeader id="AccordionItemExample2Header" for="AccordionItemExample2Content">
            Accordion Header #2
        </AccordionHeader>
        <AccordionContent id="AccordionItemExample2Content" labelledById="AccordionItemExample2Header">
            {{ content }}
        </AccordionContent>
    </AccordionItem>
    <AccordionItem id="AccordionItemExample3">
        <AccordionHeader id="AccordionItemExample3Header" for="AccordionItemExample3Content">
            Accordion Header #3
        </AccordionHeader>
        <AccordionContent id="AccordionItemExample3Content" labelledById="AccordionItemExample3Header">
            {{ content }}
        </AccordionContent>
    </AccordionItem>
</Accordion>

API

Prop name	Type	Default	Required	Description
`children`	`ReactNode`	-	yes	Accordion children's nodes
`elementType`	`'section', 'article', 'div'`	`'section'`	no	Type of element used as wrapper
`open`	`string, string[]`	-	no	Open item or list of open items *
`toggle`	`(id: string) => void`	-	no	A generic handler for a single AccordionItem
`UNSAFE_className`	`string`	-	no	Wrapper custom class name
`UNSAFE_style`	`CSSProperties`	-	no	Wrapper custom style

(*) Depending on the type of default value, what is set as the default will affect whether one or more will be open at the same time.

Uncontrolled Accordion Props

Prop name	Type	Default	Required	Description
`children`	`ReactNode`	-	yes	Accordion children's nodes
`elementType`	`'section', 'article', 'div'`	`'section'`	no	Type of element used as wrapper
`defaultOpen`	`string, string[]`	-	no	Default open item(s) *
`stayOpen`	`bool`	-	no	Item stay open when another one is also opened
`UNSAFE_className`	`string`	-	no	Wrapper custom class name
`UNSAFE_style`	`CSSProperties`	-	no	Wrapper custom style

(*) If this attribute is an array, then the stayOpen parameter should also be set.

AccordionItem Props

Prop name	Type	Default	Required	Description
`id`	`string`	-	yes	Item id
`children`	`ReactNode`	-	yes	Item children node
`elementType`	`'article', 'section', 'div'`	`'article'`	no	Type of element used as wrapper for single item
`UNSAFE_className`	`string`	-	no	Item custom class name
`UNSAFE_style`	`CSSProperties`	-	no	Item custom style

AccordionHeader Props

Prop name	Type	Default	Required	Description
`children`	`ReactNode`	-	yes	Header children node
`slot`	`ReactNode`	-	no	Side slot in the header
`UNSAFE_className`	`string`	-	no	Header custom class name
`UNSAFE_style`	`CSSProperties`	-	no	Header custom style

AccordionContent Props

Prop name	Type	Default	Required	Description
`children`	`ReactNode`	-	yes	Content children node
`UNSAFE_className`	`string`	-	no	Content custom class name
`UNSAFE_style`	`CSSProperties`	-	no	Content custom style

On this page