Accordion

Accordions are used to show and hide content.


Accordion

Component status: WIP

Accordions are used to show and hide content.


<!-- Accordion Configuration Options
  
data-allow-toggle
    Allow for each toggle to both open and close individually
  
data-allow-multiple
    Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise you would not be able to close any of the accordions
__________

Ex:
    <dl id="accordionGroup" role="presentation" class="Accordion" data-allow-multiple>

    <dl id="accordionGroup" role="presentation" class="Accordion" data-allow-toggle>

-->
<dl id="accordion" role="presentation" class="accordion w--sm " data-allow-toggle>
    <dt role="heading" aria-level="3">
        <button aria-expanded="false" class="accordion__trigger" aria-controls="sect1" id="accordion1" type="button">
            <span class="accordion__title">
                Hvor lang leveringstid har I?
            </span>
            <span class="accordion__icon"></span>
        </button>
    </dt>
    <dd id="sect1" role="region" aria-labelledby="accordion1" class="accordion__item closed" hidden="">
        <div class="accordion__content">
            <p>Vi ekspederer din ordre hurtigst mulig med en levereringstid på 1-3 hverdage. Vi kan dog ikke give en 100 % garanti. Når din ordre er pakket og klar til afsendelse, modtager du automatiskt din kvittering pr. e-mail med tilhørende Track & Trace nummerm så du kan følge forsendelsen. Vær opmærksom på, at din ordre kan være sendt af flere forsendelser, alt afhængig af, hvor varerne afsendes fra. Ved produkter med specielle levereringsvilkårm vil levereringsinformation være oplyst på produktsiden.</p>
            
        </div>
    </dd>
    <dt role="heading" aria-level="3">
        <button aria-expanded="false" class="accordion__trigger" aria-controls="sect2" id="accordion2" type="button">
            <span class="accordion__title">
                Hvor længe har du ret til at vende tilbage?
            </span>
            <span class="accordion__icon"></span>
        </button>
    </dt>
    <dd id="sect2" role="region" aria-labelledby="accordion2" class="accordion__item closed" hidden="">
        <div class="accordion__content">
            <p>The company traces its roots back to 1868 when Theodor Wessel and Emil Vett opened a draper's shop in Aarhus under the name Emil Vett & Co. It was an immediate success and in 1871 moved to Immervad where the Aarhus store is still located. In 1870 the company opened a shop in Copenhagen in rented rooms in the mondain Hotel du Nord on Kongens Nytorv where Hans Christian Andersen had boarded from 1838 until 1847. The shop occupied an ever larger part of the hotel and the company adopted the name Magasin du Nord after it in 1879.</p>
            
        </div>
    </dd>
    <dt role="heading" aria-level="3">
        <button aria-expanded="false" class="accordion__trigger" aria-controls="sect3" id="accordion3" type="button">
            <span class="accordion__title">
                Kan jeg returnere mit produkt til butikken?
            </span>
            <span class="accordion__icon"></span>
        </button>
    </dt>
    <dd id="sect3" role="region" aria-labelledby="accordion3" class="accordion__item closed" hidden="">
        <div class="accordion__content">
            <p>The company traces its roots back to 1868 when Theodor Wessel and Emil Vett opened a draper's shop in Aarhus under the name Emil Vett & Co. It was an immediate success and in 1871 moved to Immervad where the Aarhus store is still located. In 1870 the company opened a shop in Copenhagen in rented rooms in the mondain Hotel du Nord on Kongens Nytorv where Hans Christian Andersen had boarded from 1838 until 1847. The shop occupied an ever larger part of the hotel and the company adopted the name Magasin du Nord after it in 1879.</p>
            
        </div>
    </dd>
    <dt role="heading" aria-level="3">
        <button aria-expanded="false" class="accordion__trigger" aria-controls="sect4" id="accordion4" type="button">
            <span class="accordion__title">
                Spørgsmål 4
            </span>
            <span class="accordion__icon"></span>
        </button>
    </dt>
    <dd id="sect4" role="region" aria-labelledby="accordion4" class="accordion__item closed" hidden="">
        <div class="accordion__content">
            <p>The company traces its roots back to 1868 when Theodor Wessel and Emil Vett opened a draper's shop in Aarhus under the name Emil Vett & Co. It was an immediate success and in 1871 moved to Immervad where the Aarhus store is still located. In 1870 the company opened a shop in Copenhagen in rented rooms in the mondain Hotel du Nord on Kongens Nytorv where Hans Christian Andersen had boarded from 1838 until 1847. The shop occupied an ever larger part of the hotel and the company adopted the name Magasin du Nord after it in 1879.</p>
            
        </div>
    </dd>
    <dt role="heading" aria-level="3">
        <button aria-expanded="false" class="accordion__trigger" aria-controls="sect5" id="accordion5" type="button">
            <span class="accordion__title">
                Spørgsmål 5
            </span>
            <span class="accordion__icon"></span>
        </button>
    </dt>
    <dd id="sect5" role="region" aria-labelledby="accordion5" class="accordion__item closed" hidden="">
        <div class="accordion__content">
            <p>The company traces its roots back to 1868 when Theodor Wessel and Emil Vett opened a draper's shop in Aarhus under the name Emil Vett & Co. It was an immediate success and in 1871 moved to Immervad where the Aarhus store is still located. In 1870 the company opened a shop in Copenhagen in rented rooms in the mondain Hotel du Nord on Kongens Nytorv where Hans Christian Andersen had boarded from 1838 until 1847. The shop occupied an ever larger part of the hotel and the company adopted the name Magasin du Nord after it in 1879.</p>
            
        </div>
    </dd>
    <dt role="heading" aria-level="3">
        <button aria-expanded="false" class="accordion__trigger" aria-controls="sect6" id="accordion6" type="button">
            <span class="accordion__title">
                Spørgsmål 6
            </span>
            <span class="accordion__icon"></span>
        </button>
    </dt>
    <dd id="sect6" role="region" aria-labelledby="accordion6" class="accordion__item closed" hidden="">
        <div class="accordion__content">
            <p>The company traces its roots back to 1868 when Theodor Wessel and Emil Vett opened a draper's shop in Aarhus under the name Emil Vett & Co. It was an immediate success and in 1871 moved to Immervad where the Aarhus store is still located. In 1870 the company opened a shop in Copenhagen in rented rooms in the mondain Hotel du Nord on Kongens Nytorv where Hans Christian Andersen had boarded from 1838 until 1847. The shop occupied an ever larger part of the hotel and the company adopted the name Magasin du Nord after it in 1879.</p>
            
        </div>
    </dd>
    <dt role="heading" aria-level="3">
        <button aria-expanded="false" class="accordion__trigger" aria-controls="sect7" id="accordion7" type="button">
            <span class="accordion__title">
                Spørgsmål 7
            </span>
            <span class="accordion__icon"></span>
        </button>
    </dt>
    <dd id="sect7" role="region" aria-labelledby="accordion7" class="accordion__item closed" hidden="">
        <div class="accordion__content">
            <p>The company traces its roots back to 1868 when Theodor Wessel and Emil Vett opened a draper's shop in Aarhus under the name Emil Vett & Co. It was an immediate success and in 1871 moved to Immervad where the Aarhus store is still located. In 1870 the company opened a shop in Copenhagen in rented rooms in the mondain Hotel du Nord on Kongens Nytorv where Hans Christian Andersen had boarded from 1838 until 1847. The shop occupied an ever larger part of the hotel and the company adopted the name Magasin du Nord after it in 1879.</p>
            
        </div>
    </dd>
</dl>
Se mere