Gå til sidens indhold

Komponenter

Accordions

En accordion er et grafisk element, som du kan bruge til vise indhold med. 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.

Retningslinjer

Tilgængelighed

  • Accordions bliver automatisk fremhævet, når brugere ved hjælp af tabulatortasten navigerer sig frem til dem.
  • Accordions er en del af den anbefalede løsning, men vi anbefaler, at du anvender dem i begrænset omfang. En stor del af brugerne ser kun overskrift på accordion (aktive tekst) og opdager ikke det underliggende indhold.

Brugervenlighed

Anvendes til

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

Anvendes ikke til

  • Accordions erstatter individuelle sider i en selvbetjeningsløsning eller 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 tringuide.

Vejledning

  • 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.

Standard

<div class="container">

    <ul class="accordion ">

        <li>
            <button class="accordion-button " aria-expanded="false"
                aria-controls="a1">
                Lorem ipsum dolor sit amet
                <span class="accordion-icon ">
                    <span class="icon_text">Information</span>
                    <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#info"></use></svg>
                </span>
            </button>

            <div id="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>
            <button class="accordion-button  accordion-error "
                aria-expanded="true" aria-describedby="a2"
                aria-controls="a2">
                Consectetur adipiscing elit
                <span class="accordion-icon ">
                    <span class="icon_text">Fejl</span>
                    <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#close-circle-outline"></use></svg>
                </span>
            </button>

            <div id="a2" aria-hidden="false" class="accordion-content">

                <div class="alert alert-error" role="alert"
                    aria-label="Fejlbesked i accordion">
                    <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>
            <button class="accordion-button " aria-expanded="false"
                aria-controls="a3">
                Sed do eiusmod tempor
                <span class="accordion-icon ">
                    <span class="icon_text">Advarsel</span>
                    <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#alert-outline"></use></svg>
                </span>
            </button>

            <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>
            <button class="accordion-button " aria-expanded="false"
                aria-controls="a4">
                Labore et dolore magna
                <span class="accordion-icon ">
                    <span class="icon_text">Success</span>
                    <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#acheck-circle-outline"></use></svg>
                </span>
            </button>

            <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>

        <li>
            <button class="accordion-button " aria-expanded="false"
                aria-controls="a5">
                Ut enim ad minim veniam</button>

            <div id="a5" 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>

Man kan undlade at sætte aria-hidden attribut på accordion-content, hvis man har implementeret dkfds.js i sit projekt. aria-hidden vil da blive tilføjet automatisk via javascript.

Tilføj ramme

<div class="container">

    <ul class="accordion accordion-bordered">

        <li>
            <button class="accordion-button " aria-expanded="false"
                aria-controls="b-a1">
                Lorem ipsum dolor sit amet
                <span class="accordion-icon ">
                    <span class="icon_text">Information</span>
                    <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#info"></use></svg>
                </span>
            </button>

            <div id="b-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>
            <button class="accordion-button  accordion-error "
                aria-expanded="true" aria-describedby="b-a2"
                aria-controls="b-a2">
                Consectetur adipiscing elit
                <span class="accordion-icon ">
                    <span class="icon_text">Fejl</span>
                    <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#close-circle-outline"></use></svg>
                </span>
            </button>

            <div id="b-a2" aria-hidden="false" class="accordion-content">

                <div class="alert alert-error" role="alert"
                    aria-label="Fejlbesked i accordion">
                    <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>
            <button class="accordion-button " aria-expanded="false"
                aria-controls="b-a3">
                Sed do eiusmod tempor
                <span class="accordion-icon ">
                    <span class="icon_text">Advarsel</span>
                    <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#alert-outline"></use></svg>
                </span>
            </button>

            <div id="b-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>
            <button class="accordion-button " aria-expanded="false"
                aria-controls="b-a4">
                Labore et dolore magna
                <span class="accordion-icon ">
                    <span class="icon_text">Success</span>
                    <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#acheck-circle-outline"></use></svg>
                </span>
            </button>

            <div id="b-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>

        <li>
            <button class="accordion-button " aria-expanded="false"
                aria-controls="b-a5">
                Ut enim ad minim veniam</button>

            <div id="b-a5" 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>

Tilføj klassen accordion-bordered til .accordion for at tilføje en synlig ramme.

Tillad mere end én åben accordion

<div class="container">

    <ul class="accordion " aria-multiselectable="true">

        <li>
            <button class="accordion-button " aria-expanded="false"
                aria-controls="m-a1">
                Lorem ipsum dolor sit amet
                <span class="accordion-icon ">
                    <span class="icon_text">Information</span>
                    <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#info"></use></svg>
                </span>
            </button>

            <div id="m-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>
            <button class="accordion-button  accordion-error "
                aria-expanded="true" aria-describedby="m-a2"
                aria-controls="m-a2">
                Consectetur adipiscing elit
                <span class="accordion-icon ">
                    <span class="icon_text">Fejl</span>
                    <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#close-circle-outline"></use></svg>
                </span>
            </button>

            <div id="m-a2" aria-hidden="false" class="accordion-content">

                <div class="alert alert-error" role="alert"
                    aria-label="Fejlbesked i accordion">
                    <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>
            <button class="accordion-button " aria-expanded="false"
                aria-controls="m-a3">
                Sed do eiusmod tempor
                <span class="accordion-icon ">
                    <span class="icon_text">Advarsel</span>
                    <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#alert-outline"></use></svg>
                </span>
            </button>

            <div id="m-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>
            <button class="accordion-button " aria-expanded="false"
                aria-controls="m-a4">
                Labore et dolore magna
                <span class="accordion-icon ">
                    <span class="icon_text">Success</span>
                    <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#acheck-circle-outline"></use></svg>
                </span>
            </button>

            <div id="m-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>

        <li>
            <button class="accordion-button " aria-expanded="false"
                aria-controls="m-a5">
                Ut enim ad minim veniam</button>

            <div id="m-a5" 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>

Man kan også tillade at flere kan være åbne på samme tid. Dette gøres ved at tilføje aria-multiselectable="true" attributten til .accordion.