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.
Använd inte utfällbara stycken för att navigera i ett flöde med flera steg, till exempel i en ansökan.
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.
För att göra utfällbara stycken tillgängliga ska
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.
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' |
Event | Beskrivning | Typ |
---|---|---|
expandedChange | Change event som triggas när expanded attributet ändras. | CustomEvent<boolean> |
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.
<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>
Namn: Tom
Ålder: 16 år
<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>
<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>
<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>
<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>
Vi håller just nu på och uppdaterar vårat exempel på utfällbart stycke.
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.
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 |
Event | Beskrivning | Typ | |
---|---|---|---|
expandedChange | Change event som triggas när expanded attributet ändras. |
|
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.
<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>
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.
<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>
<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>
<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>
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.
<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
Sidansvarig för sidan är Styleguide