Utfällbara stycken

Utfällbara stycken, det vill säga accordion, finns två varianter. En som främst används för att dölja respektive visa text och en som används för att dölja respektive visa innehåll i formulär.

Design och språk

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

  • Utfällbara stycken för text används främst på webbplatser och där du 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.
  • Utfällbara stycken för formulär används främst i e-tjänster och interna system.

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

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 så att skärmläsaren 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-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-col-vertical l-gap-md">
    <button class="c-btn--medium">Ta bort</button>
    <button class="c-btn--medium">Redigera</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-col-1-n 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-col-1-n 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-col-n-1 l-gap-sm l-align-center">
        <span class="l-col-1-n l-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-col-n-1 l-gap-sm">
        <span class="l-col-1-n l-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

  • StödFörgröningsstöd Belopp50 000,00 kr
    Content
  • StödNötkreaturstöd Belopp1 000,00 kr
    Content
HTML
<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-col-n-1 l-gap-sm">
        <span class="l-col-1-n l-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-col-n-1 l-gap-sm">
        <span class="l-col-1-n l-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>

Exempel

Äldre version av utfällbart stycke

Komponent och kod

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

Komponenten finns i storlekarna medium och small. Du kan använda storleken small när utrymmet på skärmen är begränsat.


Parametrar på utfällbart stycke version 1

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

accordionId

accordion-id

Id för accordion titlen, om inget anges autogenereras ett id.

string

-

expanded

expanded

Ska det utfällbara stycket vara utfällt?

boolean

false

extraClass

extra-class

Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2"

string

-

heading

heading

Titeln på det utfällbara stycket.

string

-

headingLevel

heading-level

Rubriknivå på titeln.

number

3

size

size

Storlek på det utfällbara stycket, möjliga alternativ är 'medium' eller 'small'.

string

'medium'

titleContentRef

title-content-ref

Referens till det innehåll som du vill stoppa in i titeln på en accordion. Innehållet kan vara vad som helst men kanske mest vanligt med knappar.

string



Listener på utfällbart stycke version 1

Event

Beskrivning

Typ

expandedChange

Change event som triggas när expanded attributet ändras.

CustomEvent<boolean>

Medium

Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.

Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna påpeka brister i tillgängligheten.

HTML
<div aria-label="accordion Control Group links" class="c-accordion-group">
  <jv-accordion-v1 heading="Använda Styleguiden" heading-level="4" expanded="true">
    <p>
      Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala
      tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen
      mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
    </p>
  </jv-accordion-v1>
  <jv-accordion-v1 heading="Tillgänglighetskraven" heading-level="4">
    <p>
      Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder
      att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en
      tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon
      information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna
      påpeka brister i tillgängligheten.
    </p>
  </jv-accordion-v1>
</div>

Small

Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.

Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna påpeka brister i tillgängligheten.

HTML
<div aria-label="accordion Control Group links" class="c-accordion-group">
  <jv-accordion-v1 heading="Använda Styleguiden" heading-level="4" size="small">
    <p>
      Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala
      tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen
      mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
    </p>
  </jv-accordion-v1>
  <jv-accordion-v1 heading="Tillgänglighetskraven" heading-level="4" size="small">
    <p>
      Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder
      att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en
      tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon
      information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna
      påpeka brister i tillgängligheten.
    </p>
  </jv-accordion-v1>
</div>

Medium för formulär

HTML
<form>
  <div aria-label="accordion Control Group links" class="c-accordion-group">
    <jv-accordion-v1 heading="Stycke ett" heading-level="4">
      <div>
        <div class="c-space--m"></div>
         <jv-dynamisk-input error-text="Fyll i förnamnet." help-text="Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning
                                    ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls." label="Förnamn">
          <input autocomplete="given-name" id="input-text-helptext-dynamisk-large" name="text2" required="" type="text">
        </jv-dynamisk-input>

        <jv-multi-select label="Vilka länder har du besökt det senaste året?" options="['Norge',
                    'Danmark', 'Finland', 'Tyskland', 'Frankrike', 'Ryssland', 'Polen',
                    'Italien', 'Storbritannien', 'Spanien', 'Ukraina', 'Nederländerna',
                    'Belgien', 'Grekland', 'Irland', 'Portugal','Island']" required="true">
        </jv-multi-select>
      </div>
    </jv-accordion-v1>

    <jv-accordion-v1 heading="Stycke två" heading-level="4">
      <div>
        <div class="c-space--m"></div>
        <jv-dynamisk-input label="Välj din favoritfrukt">
          <select id="select-accordion-form-2">
            <option></option>
            <option>Ananas</option>
            <option>Apelsin</option>
            <option>Banan</option>
            <option>Blodapelsin</option>
            <option>Clementin</option>
            <option>Dadel</option>
            <option>Kiwifrukt</option>
            <option>Päron</option>
            <option>Äpple</option>
          </select>
        </jv-dynamisk-input>
      </div>
    </jv-accordion-v1>
  </div>
</form>

Small för formulär

HTML
<form>
  <div aria-label="accordion Control Group links" class="c-accordion-group">
    <jv-accordion-v1 heading="Stycke ett" size="small" heading-level="4">
      <div>
        <div class="c-space--m"></div>
        <jv-dynamisk-input error-text="Fyll i förnamnet." helptext="Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning
                  ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls." input-ref="input" label="Förnamn" size="small">
          <input autocomplete="given-name" id="input-text-helptext-dynamisk-small_2" name="text2" required="" type="text">
        </jv-dynamisk-input>
        <jv-multi-select label="Vilka länder har du besökt det senaste året?" options="['Norge',
                    'Danmark', 'Finland', 'Tyskland', 'Frankrike', 'Ryssland', 'Polen',
                    'Italien', 'Storbritannien', 'Spanien', 'Ukraina', 'Nederländerna',
                    'Belgien', 'Grekland', 'Irland', 'Portugal','Island']" required="true" size="small">
        </jv-multi-select>
      </div>
    </jv-accordion-v1>

    <jv-accordion-v1 heading="Stycke två" heading-level="4" size="small">
      <div>
        <div class="c-space--m"></div>
        <jv-dynamisk-input label="Välj din favoritfrukt" size="small">
          <select id="select-accordion-form-small-2">
            <option></option>
            <option>Ananas</option>
            <option>Apelsin</option>
            <option>Banan</option>
            <option>Blodapelsin</option>
            <option>Clementin</option>
            <option>Dadel</option>
            <option>Kiwifrukt</option>
            <option>Päron</option>
            <option>Äpple</option>
          </select>
        </jv-dynamisk-input>
        <button class="c-btn--medium">Skicka in</button>
      </div>
    </jv-accordion-v1>
  </div>
</form>

Knappar i rubriken

Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.

Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna påpeka brister i tillgängligheten.

HTML
<div aria-label="accordion Control Group links" class="c-accordion-group">
  <jv-accordion-v1 heading="Stycke ett" heading-level="4" title-content-ref="title_btn">
    <button class="c-btn--medium btn-class mb-0" slot="title_btn">
      <span class="sjv-i-skrap ikon-class"></span>Ta bort
    </button>
    <p>
      Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala
      tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen
      mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
    </p>
  </jv-accordion-v1>
  <jv-accordion-v1 heading="Stycke två" heading-level="4" title-content-ref="title_btn">
    <button class="c-btn--medium btn-class mb-0" slot="title_btn">
      <span class="sjv-i-skrap ikon-class"></span>Ta bort
    </button>
    <p>
      Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder
      att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en
      tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon
      information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna
      påpeka brister i tillgängligheten.
    </p>
  </jv-accordion-v1>
</div>

Senast publicerad

Sidansvarig för sidan är Styleguide