Utvidbart panel
Utvidbart panel
Utvidbart panel er laget med <details> og <summary> elementet.
Størrelsen endres ved å sette panelet i et container med ønsket width.
Utvidbart panel er greit å bruke for å redusere overveldene innhold og scrolling. Det kan hjelpe brukeren med å få oversikt.
Selv om utvidbart panel kan være fint for å presentere komplekst innhold, passer det ikke til alt. Ikke gjem kjerneinnhold som brukeren lurer på. Hvis brukerne åpner alle fanene kan det være et tydelig tegn på å la innholdet være åpent. Da reduserer man klikk og det kan være enklere for brukeren å scrolle nedover siden.
Husk, det er mange myter om at brukere “ikke scroller nedover“. Så lenge innholdet oppleves relevant er bruker villig til å scrolle videre - Opplever du at det er mye innhold - se om dere kan gjøre en innholdsjobb i steden for. Når det er sagt, test ut og bruk komponenten til det behovet du ønsker å møte.
Tittel
<h1 class="heading heading__h1--s">Tittel</h1>
<details class="kv-expandable">
<summary class="kv-expandable__title">Tekst</summary>
<p class="detail detail--sml">Beskrivelse</p>
</details>
Utvidbart panel set
Vi kan opprette et panel set ved å legge til flere <details> elementer.
Tittel
<h1 class="heading heading__h1--s">Tittel</h1>
<details class="kv-expandable">
<summary class="kv-expandable__title">Tekst</summary>
<p class="detail detail--sml">Beskrivelse</p>
</details>
<details class="kv-expandable">
<summary class="kv-expandable__title">Tekst</summary>
<p class="detail detail--sml">Beskrivelse</p>
</details>
<details class="kv-expandable">
<summary class="kv-expandable__title">Tekst</summary>
<p class="detail detail--sml">Beskrivelse</p>
</details>
<details class="kv-expandable">
<summary class="kv-expandable__title">Tekst</summary>
<p class="detail detail--sml">Beskrivelse</p>
</details>