Utfällbara stycken

Du kan använda utfällbara stycken, det vill säga accordion, när du vill göra det möjligt att dölja viss text eller annat innehåll och låta användaren välja när innehållet ska visas.

Design och språk

När du ska använda ett utfällbart stycke

När du vill vill dölja viss information för att på så sätt få en mer överskådlig layout. Du kan också använda utfällbara stycken för att dölja avsnitt i texter som är av sekundärt intresse för alla eller vissa grupper av användare.

När du inte ska använda utfällbara stycken

Använd inte utfällbara stycken för att navigera i ett flöde med flera steg, till exempel i en ansökan.

Skriv en tydlig rubrik till det utfällbara stycket

Rubriken ska vara tydlig så att användaren förstår vilken information som finns i det utfällbara stycket. Det är extra viktigt på webbplatser när en användare kan ha använt sökfunktionen och den sökta informationen finns i ett ihopfällt stycke.

Tillgänglighet

För att göra utfällbara stycken tillgängliga ska

det första elementet ha en aria-label om det saknas rubrik på det utfällbara stycket. Detta för att skärmläsaren ska förstår att det finns en eller flera utfällbara stycken.
varje button-element ha ett unikt id och en aria-controls som ska vara samma som id för innehållet i div-taggen som hör till respektive utfällbart stycke
varje button-element ha ett aria-expanded attribut för att berätta för skärmläsaren om innehållet är utfällt eller inte
innehållet i div-taggen ha ett aria-hidden attribut som berättar för skärmläsaren när innehållet är synligt så den vet om texten ska läsas upp eller inte.

Komponent och kod

Komponenten driftsattes första gången i version 18.0.31.

Komponentens storlek styrs av innehållet i komponenten och finns därför endast i en storlek.

Parametrar på utfällbart stycke
Egenskap	Attribut	Beskrivning	Typ	Förvalt värde
accordionId	accordion-id	Id för accordion titlen, om inget anges autogenereras ett id.	string	-
contentRef	content-ref	Referens till innehåll som visas om accordion är öppet .	string	-
controlRowRef	control-row-ref	Referens till control-row platshållare brevid trigger.	string	-
expanded	expanded	Initierar öppen eller dold status på accordion.	boolean	false
extraClass	extra-class	Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2"	string	-
triggerContentRef	trigger-content-ref	Referens till innehåll i trigger-knappet.	string	-
triggerGap	trigger-gap	Avstånd mellan trigger och control-row Enum värde: 'l-gap-lg' \| 'l-gap-md' \| 'l-gap-sm'	"l-gap-lg" \| "l-gap-md" \| "l-gap-sm"	'l-gap-sm'

Listener på utfällbart stycke
Event	Beskrivning	Typ
expandedChange	Change event som triggas när expanded attributet ändras.	CustomEvent<boolean>

Utfällbart stycke

Fakta om drakar

En drake kan leva i 15-20 år, om den blir väl omhändertagen. Olika raser har också olika levnadsåldrar. Det finns drakar som blivit upp emot 30 år, men detta är väldigt sällsynt.

HTML

<jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
  <span slot="exempel_trigger" class="l-col-1-n l-gap-sm">
    <span class="sjv-i-caret-hoger c-accordion--title-icon"></span>
    <span>Fakta om drakar</span>
  </span>
  <div slot="exempel_content">
    <p class="mb-0">
      En drake kan leva i 15-20 år, om den blir väl omhändertagen. Olika raser har också olika
      levnadsåldrar. Det finns drakar som blivit upp emot 30 år, men detta är väldigt sällsynt.
    </p>
  </div>
</jv-accordion>

Utfällbart stycke med knappar

Kanlaon dragon

Namn: Tom

Ålder: 16 år

HTML

<jv-accordion trigger-content-ref="exempel_trigger" control-row-ref="exempel_controlrow" content-ref="exempel_content" trigger-gap="l-gap-sm" expanded="true" accordion-id="exempel_1">
  <span slot="exempel_trigger" class="l-col-1-n l-flex--nowrap l-gap-sm">
    <span class="sjv-i-caret-hoger c-accordion--title-icon"></span>
    <span>Kanlaon dragon</span>
  </span>
  <div slot="exempel_controlrow" class="l-flex-horizontal md:l-flex--nowrap l-gap-md">
     <button class="c-btn c-btn--medium"><span class="sjv-i-skrap"></span>Ta bort</button>
  </div>
  <div slot="exempel_content">
    <p><strong>Namn: </strong>Tom</p>
    <p><strong>Ålder: </strong>16 år</p>
  </div>
</jv-accordion>

Utfällbart stycke i en grupp

Druk
Content
Tatsu
Content

HTML

<ul class="c-accordion-group e-ul">
  <li>
    <jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
      <span slot="exempel_trigger" class="l-flex-horizontal l-flex-nowrap l-gap-sm">
        <span class="sjv-i-caret-hoger c-accordion--title-icon"></span>
        <span>Druk</span>
      </span>
      <div slot="exempel_content">
        <span>Content</span>
      </div>
    </jv-accordion>
  </li>
  <li>
    <jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
      <span slot="exempel_trigger" class="l-flex-horizontal l-flex-nowrap l-gap-sm">
        <span class="sjv-i-caret-hoger c-accordion--title-icon"></span>
        <span>Tatsu</span>
      </span>
      <div slot="exempel_content">
        <span>Content</span>
      </div>
    </jv-accordion>
  </li>
</ul>

Utfällbart stycke i en lista

Förgröningsstöd 50 000,00 kr
Content
Nötkreaturstöd 1 000,00 kr
Content

HTML

<ul class="c-accordion-group--list e-ul">
  <li>
    <jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
      <span slot="exempel_trigger" class="l-flex-horizontal l-flex--nowrap l-gap-sm l-align-center">
        <span class="l-flex-horizontal l-flex--nowrap l-gap-sm">
          <span class="sjv-i-caret-hoger c-accordion--title-icon"></span>
          <span>Förgröningsstöd</span>
        </span>
        <span>50 000,00 kr</span>
      </span>
      <div slot="exempel_content">
        <span>Content</span>
      </div>
    </jv-accordion>
  </li>
  <li>
    <jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
      <span slot="exempel_trigger" class="l-flex-horizontal l-flex--nowrap l-gap-sm">
        <span class="l-flex-horizontal l-flex--nowrap l-gap-sm">
          <span class="sjv-i-caret-hoger c-accordion--title-icon"></span>
          <span>Nötkreaturstöd</span>
        </span>
        <span>1 000,00 kr</span>
      </span>
      <div slot="exempel_content">
        <span>Content</span>
      </div>
    </jv-accordion>
  </li>
</ul>

Utfällbart stycke som en tabell

Namn

Belopp

StödFörgröningsstöd Belopp50 000,00 kr
Content
StödNötkreaturstöd Belopp1 000,00 kr
Content

HTML

<div class="l-flex-1-n list-heading">
  <div style="font-weight: bold;">Namn</div>
  <div style="font-weight: bold;" class="l-flex l-align-right">Belopp</div>
</div>
<ul class="c-accordion-group--table e-ul">
  <li>
    <jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
      <span slot="exempel_trigger" class="l-flex-horizontal l-flex--nowrap l-gap-sm">
        <span class="l-flex-horizontal l-flex--nowrap l-gap-sm">
          <span class="sjv-i-caret-hoger c-accordion--title-icon" aria-hidden="true"></span>
          <span><span class="screen-reader-text">Stöd</span>Förgröningsstöd</span>
        </span>
        <span><span class="screen-reader-text">Belopp</span>50 000,00 kr</span>
      </span>
      <div slot="exempel_content">
        <span>Content</span>
      </div>
    </jv-accordion>
  </li>
  <li>
    <jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
      <span slot="exempel_trigger" class="l-flex-horizontal l-flex--nowrap l-gap-sm">
        <span class="l-flex-horizontal l-flex--nowrap l-gap-sm">
          <span class="sjv-i-caret-hoger c-accordion--title-icon" aria-hidden="true"></span>
          <span><span class="screen-reader-text">Stöd</span>Nötkreaturstöd</span>
        </span>
        <span><span class="screen-reader-text">Belopp</span>1 000,00 kr</span>
      </span>
      <div slot="exempel_content">
        <span>Content</span>
      </div>
    </jv-accordion>
  </li>
</ul>

Senast publicerad 2024-02-02

Sidansvarig för sidan är Styleguide