Accordion

React Sass

Med trekkspillister kan vi presentere mye innhold på liten plass. En trekkspilliste har én eller flere rader, som brukeren kan klikke på for å vise eller skjule informasjon.

Hvem kan kjøpe livsforsikring?

Hvem kan kjøpe kritisk sykdom?

Hvem kan kjøpe uførepensjon?

<Accordion>
    <AccordionItem title="Hvem kan kjøpe livsforsikring?">
        <UnorderedList>
            <ListItem>Personer med et norsk fødselsnummer.</ListItem>
            <ListItem>Personer som har vært bosatt i Norge i minst de fem siste årene før avtalen inngås.</ListItem>
            <ListItem>Livsforsikring kan kjøpes på nett av personer mellom 18 og 79 år.</ListItem>
        </UnorderedList>
        Ønsker du en forsikringssum på mer enn 3 millioner trenger vi ekstra økonomiske opplysninger. Da må du ta
        kontakt med banken din.
    </AccordionItem>
    <AccordionItem title="Hvem kan kjøpe kritisk sykdom?">
        Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene før
        avtalen inngås. Kritisk sykdom kan kjøpes på nett av personer mellom 18 og 58 år. Ønsker du en
        forsikringssum på mer enn 1,1 millioner trenger vi ekstra økonomiske opplysninger. Da må du ta kontakt med
        banken din.
    </AccordionItem>
    <AccordionItem title="Hvem kan kjøpe uførepensjon?">
        Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene før
        avtalen inngås. Uførepensjon kan kjøpes på nett av personer mellom 18 og 60 år. Ønsker du en forsikringssum
        på mer enn 96 000 trenger vi ekstra økonomiske opplysninger. Da må du ta kontakt med banken din.
    </AccordionItem>
</Accordion>

En trekkspilliste med én rad fungerer ikke alltid like bra. Hvis du ønsker et alternativ kan du vurdere å ta i bruk ExpandButton.

Når bruker vi en Accordion?

Viktig informasjon bør alltid ligge synlig, ikke skjult i en trekkspilliste. Hvilken informasjon som er viktig kommer an på situasjonen din. Om du er i tvil, velg å ikke bruke Accordion.

Trekkspillister passer godt til tilleggsinformasjon som kan være til hjelp for brukerne.
Teksten på hver rad i listen må være tydelig, og må beskrive innholdet for brukeren. "Vis mer" er ikke en god nok tittel.
Du kan sette en overskrift for hele trekkspillisten om du ønsker.

Eksempler på bruk

React API

Her finner du en oversikt over props på komponentene i pakken.

AccordionItem

Prop	Standardverdi	Påkrevd	Type
`title`	ingen	Påkrevd	`string`
`startExpanded`	`false`	Ikke påkrevd	`boolean \| undefined`
`className`	ingen	Ikke påkrevd	`string \| undefined`
`onClick`	ingen	Ikke påkrevd	`((e: MouseEvent<Element, MouseEvent>, isOpen: boolean) => void) \| undefined`
`children`	ingen	Påkrevd	`ReactNode`

Accordion