Accordion
Release dato: 25.04.2024
Sist oppdatert: 26.05.2025
Accordion (også kalt expandable, trekkspill eller uttrekkspanel) brukes til å gruppere innhold som kan åpnes og lukkes. Det hjelper brukeren å få oversikt og gjør det enklere å fokusere på én ting om gangen. Accordion egner seg godt når du har mye informasjon, men ikke ønsker å overvelde brukeren.
Live demo
Relaterte komponenter
Lar brukeren bytte mellom ulike visninger eller seksjoner.
Når du vil vise detaljert innhold uten å ta brukeren ut av kontekst.
Grupperer informasjon uten funksjonalitet for å åpne og lukke.
Varianter
Typer
Accordion har to ulike typer med ulike bruksområder:
| Type | Beskrivelse |
|---|---|
| Standard | Flere rader kan åpnes samtidig |
| Single (en åpen) | Brukes når bare ett panel bør være åpent, for eksempel ved trinnvis guiding eller steg-for-steg-informasjon |
Størrelser
Accordion kommer i to ulike størrelser:
| Størrelse | Beskrivelse |
|---|---|
| Default | Standard størrelse. Brukes når du har vanlig mengde innhold og vil at komponenten skal ta litt mer plass for bedre lesbarhet. |
| Compact | Kompakt størrelse. Brukes når du vil spare plass eller når accordion skal stå i et område med mange andre elementer. Passer godt der du vil ha en mer kompakt og diskret løsning. |
Skins
Accordion kommer i fire ulike skins (farger og styling):
| Skin | Beskrivelse |
|---|---|
| Borderless | Enkel bakgrunnsfarge og stil |
| Border | Kantlinje på radene |
| Beige | Annenhver rad er beige |
| Blue | Annenhver rad er blå |
Retningslinjer for bruk
Bruk accordion når
- du vil presentere mye informasjon uten å overvelde brukeren
- brukeren ikke trenger å lese alt for å forstå helheten
- du har relaterte temaer som kan grupperes sammen
Unngå accordion når
- alt innhold må leses i én sammenheng for å forstå helheten
- du trenger mer kompleks interaktivitet, bruk heller modal eller tabs
Radene må ha tydelige overskrifter
Tittelen i hvert rad må være beskrivende og kort. Brukeren må forstå hva de finner bak hver rad uten å måtte åpne den. De bør også kun inneholde ett enkelt tema.
Gjør slik
Unngå
Hold innholdet kort og konsist
Innholdet i hvert rad bør være maks én til to korte setninger. Hvis det blir for langt, vurder å dele det opp eller flytte det til en egen side.
Gjør slik
Unngå
Bruk accordion til innhold som logisk hører sammen
Accordion skal hjelpe brukeren å orientere seg. Derfor må innholdet høre sammen. Tenk på det som en liste med elementer som tilhører samme kategori.
Gjør slik
Unngå
Responsivitet
Accordion fungerer godt på alle skjermstørrelser. Den kollapser eller ekspanderer innhold uten å endre layout.
Du bør likevel teste og forsikre deg om at
- overskrifter ikke avkortes
- det er lett å se hva som er åpent/lukket, også på mobil
- marginer og spacing mellom radene er riktig
Universell utforming
Innholdet må gi mening med skjermleser
Accordion må være tilgjengelig for alle, også for brukere som navigerer med tastatur eller bruker skjermleser. Bruker du komponenten som den er vil du få funksjonaliteten, men du burde forsikre deg om at innholdet gjør det lett for brukeren å navigere i komponenten.
Komponenten støtter
- navigasjon mellom accordion-rader med “Tab” og “Shift” + “Tab”
- åpning og lukking av rader med Enter eller Space
- tydelig visuell fokusindikator når en rad er i fokus
- tydelig markering av hvilken rad som er åpen
Er Punkt sin accordion tilgjengelig nok?
Punkt sin accordion-komponent bruker HTML-elementene details og
summary. Dette er fordi disse elementene er semantiske og
tilgjengelige i seg selv. Når man først leser om accordion på internett
refereres det ofte til en test gjort av Haskall i
2019
som argumentasjon for å bruke andre alternativer (ofte buttons wrappet
i headings som f.eks. WAI-ARIA sin accordion
Pattern.
Dette er fordi details og summary-elementene har hatt dårlig
støtte i enkelte skjermlesere tidligere. Dette er noe som har blitt, og blir
bedre med tiden. I dag er støtten god nok til at vi kan bruke disse
elementene.
Mer om universell utforming av accordion:
Retningslinjer for universelt utformede accordions
Anatomi
| Element | Beskrivelse |
|---|---|
| 1. Tittel (valgfritt) | Brukes som en forklaring over hele accordion-gruppen |
| 2. Åpne- og lukke-ikon | Viser status og gir visuell ledetråd (pil-ikon) |
| 3. Overskrift | Tittel på hver rad, vises som summary |
| 4. Innhold | Teksten eller innholdet som vises når raden åpnes |
Implementasjon i kode
Accordion lar brukeren åpne og lukke innhold. I Punkt er komponenten bygget på de semantiske HTML-elementene <details> og <summary>. Dette gir innebygd støtte for tastaturnavigasjon og gjør komponenten både enkel og tilgjengelig.
For React og Elements tilbyr Punkt både wrapper-komponenten <PktAccordion> og enkeltstående <PktAccordionItem>.
Som standard kan flere accordion-rader være åpne samtidig. Ønsker du at kun én rad skal være åpen, må du styre tilstanden selv. Les mer under “Begrens antall åpne rader”.
Hvordan ta komponenten i bruk?
import @oslokommune/punkt-elements/dist/pkt-accordion.js;
import @oslokommune/punkt-elements/dist/pkt-accordion-item.js;import { PktAccordion, PktAccordionItem } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-accordion.js" type="module"></script>
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-accordion-item.js" type="module"></script>Testing
Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:
await window.customElements.whenDefined("pkt-accordion");Begrens antall åpne rader
Som standard støtter Accordion åpning av flere rader samtidig. For å styre at kun én rad kan være åpen om gangen, må man styre alle radene sin toggle tilstand lokalt - det vil si at man må overstyre den automatiske tilstandshåndteringen til komponenten. Dette gjøres ved å sette en boolean isOpen og en onClick/click funksjon på <AccordionItem>/<pkt-accordion-item> som styrer åpne-lukke tilstanden til komponenten.
I React trenger man å sende inn event for å forhindre inkonsekvent oppførsel. Dette er fordi <details>-elementet har sin egen innebygde toggle-funksjon som kan føre til inkonsekvens når vi prøver å sette isOpen-propen i React. I <AccordionItem> kjører vi e.preventDefault() for å forhindre at <details>-elementet sin innebygde toggle-funksjon kjører. Sjekk eksemplene under!
<script>
@state() private openedItem: string = ''
function toggleCurrentOpenItem(e: MouseEvent, id: string) {
e.preventDefault() // Prevent default behavior to ensure controlled state
if (this.openedItem === id) {
this.openedItem = ''
} else {
this.openedItem = id
}
}
</script>
<pkt-accordion skin="blue" aria-labelledby="accordion-standard">
<pkt-accordion-item
id=${item.id}
title=${item.title}
.isOpen=${this.openedItem == item.id}
@click=${(e: MouseEvent) => this.toggleCurrentOpenItem(e, item.id)}
>
${item.content}
<p>Element innhold</p>
</pkt-accordion-item>
</pkt-accordion>const [openedItem, setOpenedItem] = useState<string>('')
const toggleCurrentOpenItem = (e: React.MouseEvent, id: string) => {
if (openedItem.includes(id)) {
setOpenedItem('')
} else {
setOpenedItem(id)
}
}
return (
<PktAccordion compact skin={"borderless"}>
{accordionItems.map((item, index) => {
return (
<PktAccordionItem
id={item.id}
key={item.id}
title={item.title}
defaultOpen={index === 0}
isOpen={openedItem === item.id}
onClick={(e) => toggleCurrentOpenItem(e, item.id)}
>
{item.content}
</PktAccordionItem>
);
})}
</PktAccordion>
)
Props og tokens
PktAccordion
| Prop | Type | Beskrivelse |
|---|---|---|
skin | borderlessoutlinedbeigeblue | Hvordan skal accordion se ut? |
ariaLabelledBy | string | ID'en til elementet som beskriver accordionen. Brukes for tilgjengelighet. |
compact | boolean | En kompakt accordion har mindre padding og margin |
name | string | Navn på accordion-gruppen, som brukes for å gruppere flere accordion-items sammen. |
| Slot (children) | Beskrivelse |
|---|---|
default | Accordion-elementene som skal vises i accordionen |
PktAccordionItem
| Prop | Type | Beskrivelse |
|---|---|---|
title | string | Tittelen som vises i sammendraget av elementet |
id | string | ID-en til accordion-elementet |
defaultOpen | boolean | Et accordion-element kan settes til å være åpent som standard når siden lastes |
isOpen | boolean | En prop som kan brukes til å overstyre lokal isOpen-tilstand, og beskriver om accordion-elementet er åpent eller ikke |
name | string | Navn på accordion-element, som brukes for å gruppere flere accordion-elementer sammen. |
| Slot (children) | Beskrivelse |
|---|---|
default | Innholdet i accordion-elementet |
Farger
Accordion støtter flere visuelle varianter (skins), og hver bruker bestemte bakgrunner og/eller kantfarger.
| Element | CSS-variabel |
|---|---|
| Background | |
| Border | |
| Text | |