Styleguide

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

Sidansvarig för sidan är Styleguide