Accordion

Usage

Default (Stay open)

                                                
                                                import React, { useState } from 'react';
                                                import { Accordion, AccordionItem, AccordionHeader, AccordionContent } from '@lmc-eu/spirit-web-react/components';
                                                import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';

const [openState, setOpenState] = useState<AccordionOpenStateType>(undefined);

                                                
                                                const toggle = (id) => {
                                                  if (Array.isArray(openState)) {
                                                    if (openState.includes(id)) {
                                                      setOpenState(openState.filter((accordionId) => accordionId !== id));
                                                    } else {
                                                      setOpenState([...openState, id]);
                                                    }
                                                  } else if (openState === id) {
                                                    setOpenState(undefined);
                                                  } else {
                                                    setOpenState(id);
                                                  }
                                                };

                                                
                                                <Accordion open={openState} toggle={toggle}>
                                                  <AccordionItem id="AccordionItemExample0">
                                                    <AccordionHeader>Accordion Header</AccordionHeader>
                                                    <AccordionContent>Accordion Content</AccordionContent>
                                                  </AccordionItem>
                                                  <AccordionItem id="AccordionItemExample1">
                                                    <AccordionHeader>Accordion Header</AccordionHeader>
                                                    <AccordionContent>Accordion Content</AccordionContent>
                                                  </AccordionItem>
                                                  <AccordionItem id="AccordionItemExample2">
                                                    <AccordionHeader>Accordion Header</AccordionHeader>
                                                    <AccordionContent>Accordion Content</AccordionContent>
                                                  </AccordionItem>
                                                  <AccordionItem id="AccordionItemExample3">
                                                    <AccordionHeader>Accordion Header</AccordionHeader>
                                                    <AccordionContent>Accordion Content</AccordionContent>
                                                  </AccordionItem>
                                                  ...
                                                </Accordion>

Default with opened on init

const [openState, setOpenState] = useState<AccordionOpenStateType>(['AccordionItemExample1']);

Open only one at a time

const [openState, setOpenState] = useState<AccordionOpenStateType>('');

Uncontrolled Accordion (Stay open)

                                                
                                                import {
                                                  UncontrolledAccordion,
                                                  AccordionItem,
                                                  AccordionHeader,
                                                  AccordionContent,
                                                } from '@lmc-eu/spirit-web-react/components';
                                                import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';

                                                
                                                <UncontrolledAccordion stayOpen>
                                                  <AccordionItem id="AccordionItemExample0">
                                                    <AccordionHeader>Accordion Header</AccordionHeader>
                                                    <AccordionContent>Accordion Content</AccordionContent>
                                                  </AccordionItem>
                                                  <AccordionItem id="AccordionItemExample1">
                                                    <AccordionHeader>Accordion Header</AccordionHeader>
                                                    <AccordionContent>Accordion Content</AccordionContent>
                                                  </AccordionItem>
                                                </UncontrolledAccordion>

Uncontrolled Accordion with default open value (Stay open)

                                                
                                                <UncontrolledAccordion defaultOpen={['AccordionItemExample1']} stayOpen>
                                                  <AccordionItem id="AccordionItemExample0">
                                                    <AccordionHeader>Accordion Header</AccordionHeader>
                                                    <AccordionContent>Accordion Content</AccordionContent>
                                                  </AccordionItem>
                                                  <AccordionItem id="AccordionItemExample1">
                                                    <AccordionHeader>Accordion Header</AccordionHeader>
                                                    <AccordionContent>Accordion Content</AccordionContent>
                                                  </AccordionItem>
                                                </UncontrolledAccordion>

Uncontrolled Accordion with open only one at a time

                                                
                                                <UncontrolledAccordion>
                                                  <AccordionItem id="AccordionItemExample0">
                                                    <AccordionHeader>Accordion Header</AccordionHeader>
                                                    <AccordionContent>Accordion Content</AccordionContent>
                                                  </AccordionItem>
                                                  <AccordionItem id="AccordionItemExample1">
                                                    <AccordionHeader>Accordion Header</AccordionHeader>
                                                    <AccordionContent>Accordion Content</AccordionContent>
                                                  </AccordionItem>
                                                </UncontrolledAccordion>

Uncontrolled Accordion with open only one at a time and default open value

                                                
                                                <UncontrolledAccordion defaultOpen="AccordionItemExample1">
                                                  <AccordionItem id="AccordionItemExample0">
                                                    <AccordionHeader>Accordion Header</AccordionHeader>
                                                    <AccordionContent>Accordion Content</AccordionContent>
                                                  </AccordionItem>
                                                  <AccordionItem id="AccordionItemExample1">
                                                    <AccordionHeader>Accordion Header</AccordionHeader>
                                                    <AccordionContent>Accordion Content</AccordionContent>
                                                  </AccordionItem>
                                                </UncontrolledAccordion>

Accordion Props

Name	Type	Default	Required	Description
children	ReactNode	—	✔	Accordion children's nodes
elementType	[section | article | div]	section	✕	Type of element used as wrapper
open	[string | string[]]	—	✕	Open item or list of open items *
toggle	(id: string) => void	—	✕	A generic handler for a single AccordionItem

(*) 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.

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

Uncontrolled Accordion Props

Name	Type	Default	Required	Description
children	ReactNode	—	✔	Accordion children's nodes
defaultOpen	[string | string[]]	—	✕	Default open item(s) *
elementType	[section | article | div]	section	✕	Type of element used as wrapper
stayOpen	bool	—	✕	Item stay open when another one is also opened

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

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

AccordionItem Props

Name	Type	Default	Required	Description
children	ReactNode	—	✔	Item children node
elementType	[article | section | div]	article	✕	Type of element used as wrapper for single item
id	string	—	✔	Item id

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

AccordionHeader Props

Name	Type	Default	Required	Description
children	ReactNode	—	✔	Header children node
elementType	ElementType	h3	✕	Type of element
slot	ReactNode	—	✕	Side slot in the header

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

AccordionContent Props

Name	Type	Default	Required	Description
children	ReactNode	—	✔	Content children node

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.