Accordion

Klassen settes på et <details> med et <summary> først. Nettleseren tar seg av åpning, lukking, tastatur og at skjermlesere melder «utvidet» eller «sammenfoldet».

Bygger du det samme av knapper og aria-expanded, må alt det skrives på nytt. Og teksten i et lukket panel forsvinner fra DOM-en, så nettleserens eget søk i siden finner den ikke lenger.

Slik tar du den i bruk

Eksempel

Ren HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/accordion/accordion.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<details class="fs-accordion">
<summary>Hvem kan søke om bostøtte?</summary>
<div class="fs-accordion__content">
  <p>Alle som bor og er folkeregistrert i boligen kan søke. Du må være over 18 år, eller ha egne barn boende hos deg.</p>
</div>
</details>

<details class="fs-accordion" open>
<summary>Hvor lang er behandlingstiden?</summary>
<div class="fs-accordion__content">
  <p>Vi behandler søknaden innen tre uker. Mangler vi vedlegg, får du beskjed i digital postkasse.</p>
</div>
</details>

TypeScript

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/accordion.css"

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<details {...fs.accordion()}>
  <summary>Hva regnes som inntekt?</summary>
  <div className={fs.accordion.content}>Lønn, pensjon og næringsinntekt.</div>
</details>

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Står elementet der fra før, setter du dem på det. Det er veien når du forbedrer HTML en server eller en mal har sendt:

import { fs } from "@fristil/designsystem"

const panel = document.querySelector<HTMLDetailsElement>("#bostotte")
if (!panel) throw new Error("fant ikke elementet")

fs.setAttributes(panel, fs.accordion({ variant: "plain" }))

panel.addEventListener("toggle", () => {
  console.log(panel.open ? "åpnet" : "lukket")
})

fs.accordion.content gir klassen på innholdet. toggle er nettleserens egen hendelse, og kommer både når brukeren åpner og når du setter open fra kode.

Attributt	Effekt
open	Panelet står åpent når siden lastes
data-variant="plain"	Uten egen ramme, for paneler som står rett under hverandre
name på flere paneler	Bare ett kan være åpent om gangen

name er nettleserens egen måte å lage et trekkspill der ett panel lukker det forrige:

<details class="fs-accordion" name="sporsmal">…</details>
<details class="fs-accordion" name="sporsmal">…</details>

Overskrift inni

Skal panelene være en del av sidens struktur, legg en overskrift inne i <summary>:

<details class="fs-accordion">
  <summary><h3>Hvem kan søke om bostøtte?</h3></summary>
  <div class="fs-accordion__content">…</div>
</details>

Da kan skjermlesere hoppe mellom spørsmålene med overskriftsnavigasjon. Nivået må passe med resten av siden.

Klasser du kan style

Klasse	Hva det er
.fs-accordion	Panelet. Varianten kommer fra data-variant.
.fs-accordion__content	Innholdet under overskriften

Variabel	Standard
--fs-accordion-radius	var(--fs-spacing-1)
--fs-accordion-padding	var(--fs-spacing-3) var(--fs-spacing-4)

Pilen er tegnet med ::after på <summary>, fordi nettleserens egen trekant ser ulik ut i hver nettleser. Skal du bytte den ut, overstyr content og border i den regelen.

Se Tilpasning for hvordan variablene og laget virker.

Tilgjengelighet

• Ikke gjem noe brukeren trenger for å komme videre. Et skjemafelt som er påkrevd hører ikke hjemme i et lukket panel.
• Overskriften i <summary> skal si hva som kommer, ikke «Les mer».
• La panelet som inneholder en feil åpne seg når skjemaet valideres. Ellers ser brukeren en feilmelding uten å finne feltet.
• <summary> er allerede en knapp for nettleseren. Ikke legg en knapp inni den.