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-flex-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-flex-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 l-flex-nowrap 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-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>

Exempel

Vi håller just nu på och uppdaterar vårat exempel på utfällbart stycke.

Ä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

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-single-select 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-single-select>
      </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-single-select 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-single-select>
        <button class="c-btn--medium">Skicka in</button>
      </div>
    </jv-accordion-v1>
  </div>
</form>

Knappar i rubriken

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--small btn-class mb-0" slot="title_btn">
      <span class="sjv-i-skrap button-icon--left"></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--small btn-class mb-0" slot="title_btn">
      <span class="sjv-i-skrap button-icon--left"></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 2023-08-07

Sidansvarig för sidan är Styleguide