Komponenter

Accordions

En accordion er et grafisk element, som du kan bruge til at skjule og vise indhold med. Vær opmærksom på, at skjult indhold risikerer at blive set i mindre grad af brugerne, end det som er umiddelbart synligt på siden.

Åbn dette eksempel i et nyt vindue

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sådan bruges komponenten

Anvendes til

Accordions er interaktive overskrifter, der anvendes til at skjule og vise det relaterede indhold.

Anvendes ikke til

Accordions erstatter ikke individuelle trin i en selvbetjeningsløsning eller sider på en hjemmeside.

Brug ikke accordions til små mængder indhold, der i stedet kunne stå synligt på siden.

Brug ikke accordions til at kollapse indhold i fx søgeresultater eller andre længere oversigter.

Brug ikke accordions til at opdele et logisk flow eller en sekvens af handlinger. Der bør du eventuelt i stedet anvende en trinindikator.

Brug ikke accordions inde i andre accordions. Hvis du har brug for at gruppere accordions, anvend da almindelige overskrifter.

Vejledning

Accordions bliver fremvist i lodret rækkefølge med synlig overskrift. Ved at klikke på accordion folder beskrivelsen af indholdet sig ud. Klikker du igen, folder beskrivelsen sammen igen.

Overvej at lade den accordion, som har det vigtigste indhold, være foldet ud, når brugerne kommer ind på siden. Så er du sikker på, at dine brugere læser den.

Generelt er det ikke en god løsning at skjule indhold for at gøre siden mere spiselig. Overvej om det er nødvendigt at kollapse indhold og hvorfor, det er det. Hvis indholdet er unødigt langt eller uoverskueligt, bør du i stedet omformulere teksten og eventuelt fordele den på flere sider.

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.

Når der vises en fejlmeddelelse, vis da også fejlopsummering.

Åbn dette eksempel i et nyt vindue

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Gå til eksemplets kode

Varianter

Åbn/luk alle

Åbn dette eksempel i et nyt vindue

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Gå til eksemplets kode

Med succesbeskeder

Åbn dette eksempel i et nyt vindue

Gå til eksemplets kode

Referencer

Installation

HTML Struktur

<ul class="accordion">
    <li>
        <h2>
            <button class="accordion-button" aria-expanded="true" aria-controls="a1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
            </button>
        </h2>
        <div id="a1" aria-hidden="false" class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
    <li>
        <h2>
            <button class="accordion-button" aria-expanded="false" aria-controls="a2">
                <span class="accordion-title">Consectetur adipiscing elit</span>
            </button>
        </h2>
        <div id="a2" aria-hidden="true" class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
    <li>
        <h2>
            <button class="accordion-button" aria-expanded="false" aria-controls="a3">
                <span class="accordion-title">Sed do eiusmod tempor</span>
            </button>
        </h2>
        <div id="a3" aria-hidden="true" class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
    <li>
        <h2>
            <button class="accordion-button" aria-expanded="false" aria-controls="a4">
                <span class="accordion-title">Labore et dolore magna</span>
            </button>
        </h2>
        <div id="a4" aria-hidden="true" class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
</ul>

Kopiér ovenstående kode for at indsætte én accordion. Ønsker du flere kan du duplikere <li> elementet.

Husk at tilpasse koden, således at ikke kun indholdet passer, men også attributterne. Herunder er særligt aria-controls og id vigtige, da disse skal være unikke.

Overskriften på en accordion skal angives som en heading. Sørg for at anvende det korrekte heading-niveau, som passer semantisk ind i konteksten på siden.

Javascript

Accordion komponenten kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new DKFDS.Accordion(document.getElementById('ACCORDION-UL-GROUP-ID')).init();

Attributten aria-hidden tilføjes automatisk i JavaScript, hvis man har undladt at tilføje attributten.

Sprog

Hvis du ønsker at anvende et andet sprog end dansk i JavaScript-koden for accordions med åbn/luk alle-funktionen, skal du selv give din oversættelse med og derefter initiere komponenten manuelt. Husk at opdatere værdien i attributten “lang” i din sides html-tag.

new DKFDS.Accordion(document.getElementById('ACCORDION-UL-GROUP-ID'), {
  "open_all": "Åbn alle", 
  "close_all": "Luk alle" 
}).init();

Events

Event key	Element	Beskrivelse
fds.accordion.open	`button.accordion-button`	Når en accordion bliver foldet ud, bliver eventet `fds.accordion.open` udløst på accordion knappen
fds.accordion.close	`button.accordion-button`	Når en accordion bliver foldet ind, bliver eventet `fds.accordion.close` udløst på accordion knappen

Åbn/luk alle

Vis dette eksempel i et nyt vindue

<div>
    <button class="accordion-bulk-button" data-accordion-bulk-expand="true">Åbn alle</button>
    <ul class="accordion">
        <li>
            <h4>
                <button class="accordion-button" aria-expanded="true" aria-controls="ao1">
                    <span class="accordion-title">Lorem ipsum dolor sit amet</span>
                </button>
            </h4>
            <div id="ao1" aria-hidden="false" class="accordion-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat.</p>
            </div>
        </li>
        <li>
            <h4>
                <button class="accordion-button" aria-expanded="false" aria-controls="ao2">
                    <span class="accordion-title">Consectetur adipiscing elit</span>
                </button>
            </h4>
            <div id="ao2" aria-hidden="true" class="accordion-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat.</p>
            </div>
        </li>
        <li>
            <h4>
                <button class="accordion-button" aria-expanded="false" aria-controls="ao3">
                    <span class="accordion-title">Sed do eiusmod tempor</span>
                </button>
            </h4>
            <div id="ao3" aria-hidden="true" class="accordion-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat.</p>
            </div>
        </li>
        <li>
            <h4>
                <button class="accordion-button" aria-expanded="false" aria-controls="ao4">
                    <span class="accordion-title">Labore et dolore magna</span>
                </button>
            </h4>
            <div id="ao4" aria-hidden="true" class="accordion-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat.</p>
            </div>
        </li>
    </ul>
</div>

Gå til eksemplets retningslinjer

Med fejl

Vis dette eksempel i et nyt vindue

<ul class="accordion">
    <li>
        <h5>
            <button class="accordion-button" aria-expanded="false" aria-controls="error-a1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
            </button>
        </h5>
        <div id="error-a1" aria-hidden="true" class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
    <li class="accordion-error">
        <h5>
            <button class="accordion-button" aria-expanded="true"
                aria-describedby="error-a2-error" aria-controls="error-a2">
                <span class="accordion-title">Consectetur adipiscing elit</span>
                <span class="accordion-icon">
                    <span class="icon_text">Fejl</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#error"></use></svg>
                </span>
            </button>
        </h5>
        <div id="error-a2" aria-hidden="false" class="accordion-content">
            <div class="alert alert-error" role="alert" id='error-a2-error'>
                <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
                <div class="alert-body">
                    <p class="alert-text">Sed ut perspiciatis unde omnis iste natus error sit
                        voluptatem accusantium doloremque laudantium.</p>
                </div>
            </div>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
    <li>
        <h5>
            <button class="accordion-button" aria-expanded="false" aria-controls="error-a3">
                <span class="accordion-title">Sed do eiusmod tempor</span>
                <span class="accordion-icon">
                    <span class="icon_text">Advarsel</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#warning"></use></svg>
                </span>
            </button>
        </h5>
        <div id="error-a3" aria-hidden="true" class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
    <li>
        <h5>
            <button class="accordion-button" aria-expanded="false" aria-controls="error-a4">
                <span class="accordion-title">Labore et dolore magna</span>
            </button>
        </h5>
        <div id="error-a4" aria-hidden="true" class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
</ul>

Gå til eksemplets retningslinjer

Med succesbeskeder

Vis dette eksempel i et nyt vindue

<ul class="accordion">
    <li>
        <h4>
            <button class="accordion-button" aria-expanded="false" aria-controls="success-a1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
            </button>
        </h4>
        <div id="success-a1" aria-hidden="true" class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
    <li>
        <h4>
            <button class="accordion-button" aria-expanded="false" aria-controls="success-a2">
                <span class="accordion-title">Consectetur adipiscing elit</span>
            </button>
        </h4>
        <div id="success-a2" aria-hidden="true" class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
    <li>
        <h4>
            <button class="accordion-button" aria-expanded="false" aria-controls="success-a3">
                <span class="accordion-title">Sed do eiusmod tempor</span>
                <span class="accordion-icon">
                    <span class="icon_text">Succes</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#success"></use></svg>
                </span>
            </button>
        </h4>
        <div id="success-a3" aria-hidden="true" class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
    <li>
        <h4>
            <button class="accordion-button" aria-expanded="false" aria-controls="success-a4">
                <span class="accordion-title">Labore et dolore magna</span>
            </button>
        </h4>
        <div id="success-a4" aria-hidden="true" class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
</ul>

Gå til eksemplets retningslinjer

Web Component-koden er i beta

Læs mere om Web Components i beta-version. Hvis du har forslag til forbedringer eller kommentarer, kan du oprette et issue på GitHub eller sende en e-mail til FDS-teamet.

Åbn eksempel i nyt vindue

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-accordion-group heading-level="h2">
    <fds-accordion heading="Lorem ipsum dolor sit amet" content-id="accordion-default-1">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Consectetur adipiscing elit" content-id="accordion-default-2">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Sed do eiusmod tempor" content-id="accordion-default-3">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Labore et dolore magna" content-id="accordion-default-4">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
</fds-accordion-group>
                        
                    
                    
                        
                            <fds-accordion-group heading-level="h2">
    <fds-accordion heading="Lorem ipsum dolor sit amet" content-id="accordion-default-1" heading-level="h2">
        <h2>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-default-1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
            </button>
        </h2>
        <div class="accordion-content" aria-hidden="true" id="accordion-default-1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Consectetur adipiscing elit" content-id="accordion-default-2" heading-level="h2">
        <h2>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-default-2">
                <span class="accordion-title">Consectetur adipiscing elit</span>
            </button>
        </h2>
        <div class="accordion-content" aria-hidden="true" id="accordion-default-2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Sed do eiusmod tempor" content-id="accordion-default-3" heading-level="h2">
        <h2>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-default-3">
                <span class="accordion-title">Sed do eiusmod tempor</span>
            </button>
        </h2>
        <div class="accordion-content" aria-hidden="true" id="accordion-default-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Labore et dolore magna" content-id="accordion-default-4" heading-level="h2">
        <h2>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-default-4">
                <span class="accordion-title">Labore et dolore magna</span>
            </button>
        </h2>
        <div class="accordion-content" aria-hidden="true" id="accordion-default-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
</fds-accordion-group>
                        
                    
                
                    
                

Om denne komponent

Denne komponent anvender light DOM. Det betyder, at komponenten genererer HTML, der kan tilgås ligesom al anden HTML på siden. Du kan som udvikler vælge mellem at tage Web Component-koden, hvis du vil lade komponenten generere HTML’en, eller tage versionen med den genererede kode, hvis du har brug for at ændre i HTML’en først. Begge muligheder vises i fanebladene i komponentens eksempler.

Uanset hvilken kode du tager, vil komponenten stadig aktivere den nødvendige JavaScript. Bemærk, at udvalgte light DOM-komponenter har en ready-attribut, du som udvikler kan bruge, hvis du i dit framework har behov for at udskyde initialisering af komponenten.

Læs mere på Web Components i beta-version om komponenternes anvendelse af light DOM og shadow DOM samt vores ønsker til feedback.

Varianter

Åbn/luk alle

Åbn eksempel i nyt vindue

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-accordion-group has-bulk-button heading-level="h4">
    <fds-accordion heading="Lorem ipsum dolor sit amet" content-id="accordion-group-1">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Consectetur adipiscing elit" content-id="accordion-group-2">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Sed do eiusmod tempor" content-id="accordion-group-3">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Labore et dolore magna" content-id="accordion-group-4">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
</fds-accordion-group>
                        
                    
                    
                        
                            <fds-accordion-group has-bulk-button="" heading-level="h4">
    <button class="bulk-button">Åbn alle</button>
    <fds-accordion heading="Lorem ipsum dolor sit amet" content-id="accordion-group-1" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-group-1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-group-1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Consectetur adipiscing elit" content-id="accordion-group-2" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-group-2">
                <span class="accordion-title">Consectetur adipiscing elit</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-group-2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Sed do eiusmod tempor" content-id="accordion-group-3" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-group-3">
                <span class="accordion-title">Sed do eiusmod tempor</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-group-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Labore et dolore magna" content-id="accordion-group-4" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-group-4">
                <span class="accordion-title">Labore et dolore magna</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-group-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
</fds-accordion-group>
                        
                    
                
                    
                

Med succesbeskeder

Åbn eksempel i nyt vindue

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-accordion-group heading-level="h4">
    <fds-accordion heading="Lorem ipsum dolor sit amet" content-id="accordion-success-1">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Consectetur adipiscing elit" content-id="accordion-success-2">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Sed do eiusmod tempor" content-id="accordion-success-3" variant-text="Succes" variant-icon="success">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Labore et dolore magna" content-id="accordion-success-4">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
</fds-accordion-group>
                        
                    
                    
                        
                            <fds-accordion-group heading-level="h4">
    <fds-accordion heading="Lorem ipsum dolor sit amet" content-id="accordion-success-1" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-success-1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-success-1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Consectetur adipiscing elit" content-id="accordion-success-2" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-success-2">
                <span class="accordion-title">Consectetur adipiscing elit</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-success-2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Sed do eiusmod tempor" content-id="accordion-success-3" variant-text="Succes" variant-icon="success" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-success-3">
                <span class="accordion-title">Sed do eiusmod tempor</span>
                <span class="accordion-icon">
                    <span class="icon_text">Succes</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#success"></use></svg>
                </span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-success-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Labore et dolore magna" content-id="accordion-success-4" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-success-4">
                <span class="accordion-title">Labore et dolore magna</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-success-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
</fds-accordion-group>
                        
                    
                
                    
                

Med fejl

Åbn eksempel i nyt vindue

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-accordion-group heading-level="h4">
    <fds-accordion heading="Lorem ipsum dolor sit amet" content-id="accordion-error-1">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Consectetur adipiscing elit" content-id="accordion-error-2" variant-text="Fejl" variant-icon="error" has-error="true">
        <div>
            <fds-alert variant="error">
                <p slot="content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
            </fds-alert>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Sed do eiusmod tempor" content-id="accordion-error-3">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Labore et dolore magna" content-id="accordion-error-4">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
</fds-accordion-group>
                        
                    
                    
                        
                            <fds-accordion-group heading-level="h4">
    <fds-accordion heading="Lorem ipsum dolor sit amet" content-id="accordion-error-1" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-error-1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-error-1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Consectetur adipiscing elit" content-id="accordion-error-2" variant-text="Fejl" variant-icon="error" has-error="true" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-error-2">
                <span class="accordion-title">Consectetur adipiscing elit</span>
                <span class="accordion-icon">
                    <span class="icon_text">Fejl</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#error"></use></svg>
                </span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-error-2">
            <fds-alert variant="error" data-visibility="visible">
                <p slot="content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
            </fds-alert>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Sed do eiusmod tempor" content-id="accordion-error-3" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-error-3">
                <span class="accordion-title">Sed do eiusmod tempor</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-error-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Labore et dolore magna" content-id="accordion-error-4" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-error-4">
                <span class="accordion-title">Labore et dolore magna</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-error-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
</fds-accordion-group>
                        
                    
                
                    
                

Konfiguration

fds-accordion

Attributter

Attribut	Beskrivelse
heading	Overskriften i accordionen.
heading-level	Overskriftsniveauet i accordionen (overskrives, når heading-level i `fds-accordion-group` er sat). Standardværdi er `"h3"`.
expanded	Sæt til `"true"`, hvis accordionen skal være åben, når siden indlæses. Standardværdi er `"false"`.
content-id	Sæt ID for content-elementet i accordionen. Standardværdien er tilfældigt genereret.
has-error	Sæt til `"true"` for at give accordionen en rød kant. Sørg for altid at give en passende fejlbesked, når denne attribut bruges.
variant-text variant-icon	Sæt en tilhørende besked og ikon på accordionen. Sørg altid for at anvende begge attributter samtidigt. Anbefalinger til kombinationer: `variant-text="Information"` og `variant-icon="info"` `variant-text="Succes"` og `variant-icon="success"` `variant-text="Advarsel"` og `variant-icon="warning"` `variant-text="Fejl"` og `variant-icon="error"` og `has-error="true"`
ready	Sæt til `"false"` for at udskyde initialisering af komponenten. Udelad attributten, eller sæt den til andet end `"false"`, for at initialisere komponenten med det samme.

Funktioner

Funktion	Beskrivelse
expandAccordion()	Fold en accordion ud.
collapseAccordion()	Fold en accordion sammen.
toggleAccordion()	Hvis en accordion er foldet ud, så foldes den sammen. Er den foldet sammen, foldes den ud.
isExpanded()	Returnerer `true`, hvis accordionen er foldet ud, og `false`, hvis den er foldet sammen.

Events

Event	Beskrivelse
fds-accordion-expanded	Udløses når accordionen foldes ud.
fds-accordion-collapsed	Udløses når accordionen foldes sammen.

fds-accordion-group

Attributter

Attribut	Beskrivelse
heading-level	Sæt overskriftsniveau for alle accordions i gruppen.
has-bulk-button	Sæt til `true` for at tilføje en knap til gruppen, der åbner/lukker alle accordions.
open-all-text	Erstat teksten på åbn/luk-knappen, når ikke alle accordions er foldet ud. Standardværdi er `"Åbn alle"`.
close-all-text	Erstat teksten på åbn/luk-knappen, når alle accordions er foldet ud. Standardværdi er `"Luk alle"`.

Funktioner

Funktion	Beskrivelse
toggleAllAccordions()	Hvis alle accordions er foldet ud, foldes de sammen. Hvis mindst én accordion er foldet sammen, foldes alle ud.

Web Components i beta-version

Accordions

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

Sed do eiusmod tempor

Labore et dolore magna

Sådan bruges komponenten

Anvendes til

Anvendes ikke til

Vejledning

Fejlmeddelelse

Lorem ipsum dolor sit amet

Consectetur adipiscing elit Fejl

Sed do eiusmod tempor Advarsel

Labore et dolore magna

Varianter

Åbn/luk alle

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

Sed do eiusmod tempor

Labore et dolore magna

Med succesbeskeder

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

Sed do eiusmod tempor Succes

Labore et dolore magna

Referencer

Installation

HTML Struktur

Javascript

Sprog

Events

Åbn/luk alle

Med fejl

Med succesbeskeder

Web Component-koden er i beta

Om denne komponent

Varianter

Åbn/luk alle

Med succesbeskeder

Med fejl

Konfiguration

fds-accordion

Attributter

Funktioner

Events

fds-accordion-group

Attributter

Funktioner