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.
Test komponenten
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 |