Accordion

GitHub Figma

Om komponenten

Accordion lar brukeren vise og skjule innhold i ulike seksjoner ved å klikke på overskriftene.

Egnet til:

Å strukturere store mengder informasjon, som for eksempel i en FAQ.
Å forkorte sider og redusere unødvendig scrolling når innholdet ikke må leses i i sin helhet, eller når plassen er begrenset, som på et mobilgrensesnitt.

Uegnet til:

Annen vilkårlig funksjonalitet der innhold skal kunne skjules og vises. Bruk heller Disclosure til dette
Viktig informasjon som bruker enkelt må finne.
Små mengder informasjon.

Varianter

<Accordion>
  <AccordionItem>
    <Heading level={2}>
      Hvordan betaler jeg ned på rammelånet?
    </Heading>
    <Content className="prose">
      Den største forskjellen mellom et vanlig boliglån og et rammelån er fleksibiliteten. Med et rammelån kan du velge å betale mindre ned på lånet i trangere tider, hvis du for eksempel i en periode opplever å få andre uforutsette utgifter. Med et rammelån kan det friste å bruke mer penger enn det du egentlig har behov for. Derfor er det viktig at du har god økonomisk disiplin, og vi anbefaler alltid å sette opp et fast månedlig trekk som minimum dekker dekker rentene. Du kan når som helst betale ned på rammelånet ditt. Det gjør du enkelt i mobilbanken eller nettbanken ved å overføre beløpet du ønsker fra en konto og inn til rammelånet.
    </Content>
  </AccordionItem>
  <AccordionItem>
    <Heading level={2}>
      Bør jeg velge rammelån eller boliglån?
    </Heading>
    <Content className="prose">
      <p>
        Om du bør velge rammelån eller boliglån avhenger av den økonomiske situasjonen din, preferansene dine og hvor mye fleksibilitet du ønsker knyttet til nedbetaling av lånet.
      </p>
      <p>
        De viktigste forskjellene på rammelån og boliglån som du bør være klar over før du tar et valg:
      </p>
      <ul>
        <li>
          Fleksibilitet: Rammelån gir deg større fleksibilitet til å låne og betale tilbake penger etter behov, mens et vanlig boliglån har en fast nedbetalingsplan.
        </li>
        <li>
          Nedbetaling av lånet: Et vanlig boliglån har en fastsatt nedbetalingsplan, mens rammelånet gir deg mer frihet til å velge når og hvor mye du ønsker å betale tilbake.
        </li>
        <li>
          Beregning av renter: Med et rammelån betaler du renter bare på det beløpet du faktisk har brukt, mens med et vanlig boliglån baserer renter seg på hele lånebeløpet.
        </li>
      </ul>
    </Content>
  </AccordionItem>
  <AccordionItem>
    <Heading level={2}>
      Overfør penger fra Boligspar Ung?
    </Heading>
    <Content className="prose">
      <p>
        Ønsker du å overføre penger fra Boligspar Ung til en av dine andre kontoer, er det en enkel sak.{' '}
        <a href="#">
          Logg inn i nettbanken
        </a>
        {' '}og velg "Uttak Boligspar" Ung i menyen. Slik som BSU, kan du ta ut det du har spart inneværende år. Om du vil ta ut mer vil kontoen avsluttes.
      </p>
    </Content>
  </AccordionItem>
</Accordion>

Retningslinjer

Innholdet i en Accordion bør ha en relasjon til hverandre. Det gjør det lettere for bruker å finne fram til relevant informasjon, og enklere for redaktør å skille innhold fra hverandre.

Dersom det er flere temaer, så bryt opp med flere seksjoner for å sikre at man ikke får for lange tekster, eller at innholdet ikke oppleves som relevant for overskriften.

Innhold liggende i en Accordion har lett for å bli oversett. Pass derfor på at innhold avgjørende for bruker ikke ligger gjemt.

Dersom det er mye informasjon som skal fortelles, så vurder å heller lage en egen side fremfor å gjemme det i en Accordion.

Header Overskriften i accordion, hold denne kort og konsis
Ikon Viser om Accordion er åpen eller lukket
Panel Der innholdet knyttet til headeren ligger

Universell utforming

Husk på

Ved tastaturnavgiering, skal man kunne bruke Tab og Shift + Tab for å navigere mellom accordionradene.
Ved tastaturnavigering, skal man kunne åpne og lukke en accordionrad ved å trykke Enter eller Space.
Ved tastaturnavigering, skal fokus flyttes og markeres med god kontrast og passende stilendringer.
Ved valgt/åpnet accordionrad, skal raden markeres tydelig.

Sjekkliste

✓ Kort og konsis overskrift i Accordion
✓ Overordnet overskrift har samme id som i ariaLabelledBy-prop i Accordion

Les mer

WAI-ARIA Accordion pattern

WCAG 1.3.1 Info and Relationships (A)

WCAG 3.2.4 Consistant Identification (AA)

Props

Accordion

Prop	Description	Default
`className?`	Additional CSS className for the element.	-
`style?`	Additional style properties for the element.	-
`ref?`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}	-
`key?`		-

AccordionItem

Prop	Description	Default
`className?`	Additional CSS className for the element.	-
`style?`	Additional style properties for the element.	-
`isOpen?`	Whether the accordion is open (controlled)	-
`defaultOpen?`	Whether the accordion is open by default (uncontrolled)	-
`onOpenChange?`	Handler that is called when the accordion's open state changes	-
`ref?`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}	-
`key?`		-

Accordion

Innhold

Om komponenten

Varianter

Retningslinjer

Unngå å kun bruke én accordion

Unngå lange overskrifter med flere temaer

Formatering

Anatomi

Universell utforming

Husk på

Sjekkliste

Les mer

Props

Accordion

AccordionItem