Accordion

Het accordioncomponent is een lijst met uitklapbare titels. Gebruikers kunnen hiermee delen van content in- en uitklappen. Doordat alleen de titels zichtbaar zijn ziet de gebruiker snel wat belangrijk is om te lezen.

Technische opmerkingen

Een accordion (.dso-accordion) bestaat uit secties (.dso-accordion-section). Een sectie heeft een handle (.dso-section-handle) en body (.dso-section-body).

Een accordion section in de state “open” moet een .dso-open class op .dso-accordion-section krijgen. Dit zorgt voor het “chevron-up”-icoon. Ook als het .dso-accordion-section element niet in het DOM staat, moet een open accordion altijd .dso-open krijgen.

Er zijn 4 modifiers: .dso-succes, .dso-warning, .dso-info en .dso-danger die op de .dso-accordion-section kunnen.

Het is mogelijk om een accordion in een accordion te plaatsen. Er moet dan wel .dso-nested-accordion op de .dso-accordion-section worden gezet.

Wanneer te gebruiken

Gebruik een accordion bij lange pagina’s met veel content om scrollen te verminderen. De titels vormen voor de gebruiker een informatiestructuur die makkelijk te overzien is. Ook wordt een pagina makkelijker leesbaar als je delen van de content kunt verbergen.

In sommige gevallen is een accordion beter dan anchors omdat de informatiestructuur behouden blijft. Accordions zijn ook beter bij mobiele weergave, waar de ruimte op de pagina beperkt is.

Wanneer niet te gebruiken

Gebruik een accordion niet als alle content zichtbaar moet zijn om vragen van gebruikers te beantwoorden. De relevantie van de content is dan belangrijker dan de totale lengte van de pagina.

Hoe te gebruiken

Zorg dat de gebruiker meerdere delen tegelijk kan openen. De delen van een accordion hebben twee verschillende posities: ingeklapt en uitgeklapt. De posities zijn af te lezen aan de chevron. Wijst de chevron naar beneden, dan is de accordion ingeklapt. Wijst de chevron naar boven, dan is de accordion uitgeklapt. De accordion kan ook genest gebruikt worden.

Gedrag en toegankelijkheid

Let bij implementatie van het accordion op het volgende:

  • Gebruik voor de uitklapbare knoppen <button>.
  • Geef deze knoppen een heading op het juiste niveau.
    • Meestal is dat 1 niveau onder het niveau van de heading die boven het accordion staat. Stel dat het accordion direct onder de paginatitel staat (dat is een <h1>). Dan krijgt de knop <h2>.
    • In een genest accordion heeft de geneste knop een heading van 1 niveau onder de heading van de bovenliggende knop. Stel dat de bovenliggende knop een <h2> heeft. Dan krijgt de geneste knop een <h3>.
  • Geef de knoppen het aria-expanded attribuut. Screenreaders hebben dit attribuut nodig om te bepalen of een knop is ingeklapt of uitgeklapt.
  • Zorg dat je javascript het aria-expanded attribuut op “true” zet bij het uitklappen en op “false” bij het inklappen.
  • Zorg daarnaast dat je javascript de modifier .dso-open meegeeft (zie html) aan de bovenliggende div van een uitgeklapte knop. De javascript moet de modifier weer weghalen bij het inklappen. Daarmee zorg je dat het verschil tussen een ingeklapte knop en een uitgeklapte knop goed zichtbaar is.
  • Voegt u via een modifier een statusicoon toe aan de uitklapbare knop (.dso-succes, .dso-warning, .dso-info of .dso-danger)? Let dan op de volgende dingen:
    • Beschrijf de betekenis van het statusicoon in de context van de accordion met een .sr-only span. Plaats deze in de tekst van de knop.
    • Voorbeeldtekst voor .dso-succes: “Informatie bouwwerkzaamheden <span class="sr-only">(afgerond)</span>

Component in context

Bronvermelding

<!-- Default -->
<div class="dso-accordion">
    <div class="dso-accordion-section">
        <h2 class="dso-section-handle"><button type="button" aria-expanded="false">Oprit (h2)

            </button>
        </h2>
    </div>
    <div class="dso-accordion-section dso-open">
        <h3 class="dso-section-handle"><button type="button" aria-expanded="true">Woning (h3)

            </button>
        </h3>
        <div class="dso-section-body">

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Woning (h2)</strong></p>
                <p>Semantisch klopt deze pagina niet, maar om de styling voor de verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>

            </div>

        </div>
    </div>
    <div class="dso-accordion-section dso-success">
        <h4 class="dso-section-handle"><button type="button" aria-expanded="false">
                <span class="sr-only">
                    succes:
                </span>
                Bouwwerkzaamheden (h4)

            </button>
        </h4>
    </div>
    <div class="dso-accordion-section dso-warning dso-open dso-nested-accordion">
        <h5 class="dso-section-handle"><button type="button" aria-expanded="true">
                <span class="sr-only">
                    waarschuwing:
                </span>
                Plaats van het bouwwerk (h5)

            </button>
        </h5>
        <div class="dso-section-body">

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Plaats van het bouwwerk (h4)</strong></p>
                <p>Semantisch klopt deze pagina niet, maar om de styling voor de verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>

            </div>

            <div class="dso-accordion">
                <div class="dso-accordion-section">
                    <h2 class="dso-section-handle">
                        <button type="button" aria-expanded="false">
                            Woning (h2)

                        </button>
                    </h2>

                </div>
                <div class="dso-accordion-section dso-success dso-open">
                    <h3 class="dso-section-handle">
                        <button type="button" aria-expanded="true">

                            <span class="sr-only">
                                succes:
                            </span>
                            Bouwwerkzaamheden (h3)

                        </button>
                    </h3>

                    <div class="dso-section-body">

                        <div class="dso-rich-content">
                            <p>Dit is een geneste accordion. De inhoud is van <strong>Bouwwerkzaamheden (h3)</strong>. Zie de <em>Notes</em> van dit component.</p>

                        </div>

                    </div>

                </div>
                <div class="dso-accordion-section dso-warning">
                    <h4 class="dso-section-handle">
                        <button type="button" aria-expanded="false">

                            <span class="sr-only">
                                waarschuwing:
                            </span>
                            Plaats van het bouwwerk (h4)

                        </button>
                    </h4>

                </div>
                <div class="dso-accordion-section dso-info">
                    <h5 class="dso-section-handle">
                        <button type="button" aria-expanded="false">

                            <span class="sr-only">
                                info:

                            </span>
                            Afmetingen van het bouwwerk (h5)

                        </button>
                    </h5>

                </div>
                <div class="dso-accordion-section dso-danger">
                    <h5 class="dso-section-handle">
                        <button type="button" aria-expanded="false">

                            <span class="sr-only">
                                fout:
                            </span>
                            Extra werkzaamheden (h5)

                        </button>
                    </h5>

                </div>
            </div>

        </div>
    </div>
    <div class="dso-accordion-section dso-info">
        <h5 class="dso-section-handle"><button type="button" aria-expanded="false">
                <span class="sr-only">
                    info:

                </span>
                Afmetingen van het bouwwerk (h5)

            </button>
        </h5>
    </div>
    <div class="dso-accordion-section dso-danger">
        <h5 class="dso-section-handle"><button type="button" aria-expanded="false">
                <span class="sr-only">
                    fout:
                </span>
                Extra werkzaamheden (h5)

                <span class="dso-status">5 van 8 beantwoord</span>

            </button>
        </h5>
    </div>
    <div class="dso-accordion-section dso-warning dso-open">
        <h5 class="dso-section-handle"><button type="button" aria-expanded="true">
                <span class="sr-only">
                    waarschuwing:
                </span>
                Optionele werkzaamheden (h5)

                <span class="dso-status">6 van 8 beantwoord</span>

            </button>
        </h5>
        <div class="dso-section-body">

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Optionele werkzaamheden (h5)</strong></p>
                <p>Semantisch klopt deze pagina niet, maar om de styling voor de verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>

            </div>

        </div>
    </div>
    <div class="dso-accordion-section">
        <h5 class="dso-section-handle"><button type="button" aria-expanded="false">Bijgevoegde werkzaamheden (h5)

                <dso-attachments-counter count="2"></dso-attachments-counter>

            </button>
        </h5>
    </div>
    <div class="dso-accordion-section">
        <h5 class="dso-section-handle"><button type="button" aria-expanded="false">Afsluitende werkzaamheden (h5)

                <span class="dso-status">7 van 8 beantwoord</span>

            </button>
        </h5>
    </div>
    <div class="dso-accordion-section dso-open">
        <h5 class="dso-section-handle"><button type="button" aria-expanded="true">Evaluatie werkzaamheden (h5)

                <dso-attachments-counter count="1"></dso-attachments-counter>

            </button>
        </h5>
        <div class="dso-section-body">

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Evaluatie werkzaamheden (h5)</strong></p>
                <p>Semantisch klopt deze pagina niet, maar om de styling voor de verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>

            </div>

        </div>
    </div>
</div>
<!-- Default Met Links -->
<div class="dso-accordion">
    <div class="dso-accordion-section">
        <h2 class="dso-section-handle">
            <a href="#" aria-expanded="false">
                Oprit (h2)

            </a>
        </h2>

    </div>
    <div class="dso-accordion-section dso-open">
        <h3 class="dso-section-handle">
            <a href="#" aria-expanded="true">
                Woning (h3)

            </a>
        </h3>

        <div class="dso-section-body">

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Woning (h2)</strong></p>
                <p>Semantisch klopt deze pagina niet, maar om de styling voor de verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>

            </div>

        </div>
    </div>
    <div class="dso-accordion-section dso-success">
        <h4 class="dso-section-handle">
            <a href="#" aria-expanded="false">

                <span class="sr-only">
                    succes:
                </span>
                Bouwwerkzaamheden (h4)

            </a>
        </h4>

    </div>
    <div class="dso-accordion-section dso-warning dso-open dso-nested-accordion">
        <h5 class="dso-section-handle">
            <a href="#" aria-expanded="true">

                <span class="sr-only">
                    waarschuwing:
                </span>
                Plaats van het bouwwerk (h5)

            </a>
        </h5>

        <div class="dso-section-body">

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Plaats van het bouwwerk (h4)</strong></p>
                <p>Semantisch klopt deze pagina niet, maar om de styling voor de verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>

            </div>

            <div class="dso-accordion">
                <div class="dso-accordion-section">
                    <h2 class="dso-section-handle">
                        <a href="#" aria-expanded="false">Woning (h2)

                        </a>
                    </h2>

                </div>
                <div class="dso-accordion-section dso-success dso-open">
                    <h3 class="dso-section-handle">
                        <a href="#" aria-expanded="true">
                            <span class="sr-only">
                                succes:
                            </span>
                            Bouwwerkzaamheden (h3)

                        </a>
                    </h3>

                    <div class="dso-section-body">

                        <div class="dso-rich-content">
                            <p>Dit is een geneste accordion. De inhoud is van <strong>Bouwwerkzaamheden (h3)</strong>. Zie de <em>Notes</em> van dit component.</p>

                        </div>

                    </div>

                </div>
                <div class="dso-accordion-section dso-warning">
                    <h4 class="dso-section-handle">
                        <a href="#" aria-expanded="false">
                            <span class="sr-only">
                                waarschuwing:
                            </span>
                            Plaats van het bouwwerk (h4)

                        </a>
                    </h4>

                </div>
                <div class="dso-accordion-section dso-info">
                    <h5 class="dso-section-handle">
                        <a href="#" aria-expanded="false">
                            <span class="sr-only">
                                info:

                            </span>
                            Afmetingen van het bouwwerk (h5)

                        </a>
                    </h5>

                </div>
                <div class="dso-accordion-section dso-danger">
                    <h5 class="dso-section-handle">
                        <a href="#" aria-expanded="false">
                            <span class="sr-only">
                                fout:
                            </span>
                            Extra werkzaamheden (h5)

                        </a>
                    </h5>

                </div>
            </div>

        </div>
    </div>
    <div class="dso-accordion-section dso-info">
        <h5 class="dso-section-handle">
            <a href="#" aria-expanded="false">

                <span class="sr-only">
                    info:

                </span>
                Afmetingen van het bouwwerk (h5)

            </a>
        </h5>

    </div>
    <div class="dso-accordion-section dso-danger">
        <h5 class="dso-section-handle">
            <a href="#" aria-expanded="false">

                <span class="sr-only">
                    fout:
                </span>
                Extra werkzaamheden (h5)

                <span class="dso-status">5 van 8 beantwoord</span>

            </a>
        </h5>

    </div>
    <div class="dso-accordion-section dso-warning dso-open">
        <h5 class="dso-section-handle">
            <a href="#" aria-expanded="true">

                <span class="sr-only">
                    waarschuwing:
                </span>
                Optionele werkzaamheden (h5)

                <span class="dso-status">6 van 8 beantwoord</span>

            </a>
        </h5>

        <div class="dso-section-body">

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Optionele werkzaamheden (h5)</strong></p>
                <p>Semantisch klopt deze pagina niet, maar om de styling voor de verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>

            </div>

        </div>
    </div>
    <div class="dso-accordion-section">
        <h5 class="dso-section-handle">
            <a href="#" aria-expanded="false">
                Bijgevoegde werkzaamheden (h5)

                <dso-attachments-counter count="2"></dso-attachments-counter>

            </a>
        </h5>

    </div>
    <div class="dso-accordion-section">
        <h5 class="dso-section-handle">
            <a href="#" aria-expanded="false">
                Afsluitende werkzaamheden (h5)

                <span class="dso-status">7 van 8 beantwoord</span>

            </a>
        </h5>

    </div>
    <div class="dso-accordion-section dso-open">
        <h5 class="dso-section-handle">
            <a href="#" aria-expanded="true">
                Evaluatie werkzaamheden (h5)

                <dso-attachments-counter count="1"></dso-attachments-counter>

            </a>
        </h5>

        <div class="dso-section-body">

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Evaluatie werkzaamheden (h5)</strong></p>
                <p>Semantisch klopt deze pagina niet, maar om de styling voor de verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>

            </div>

        </div>
    </div>
</div>
<!-- Default Met Formulier -->
<div class="dso-accordion">
    <div class="dso-accordion-section dso-open">
        <h3 class="dso-section-handle"><button type="button" aria-expanded="true">Stap met formulier zonder fieldset

            </button>
        </h3>
        <div class="dso-section-body">

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="omgevingsvergunningPostcode" class="control-label">
                        Postcode
                    </label>

                </div>
                <div class="dso-field-container">

                    <input type="text" id="omgevingsvergunningPostcode" class="form-control" size="8">

                </div>

            </div>

            <fieldset class="form-group dso-radios">
                <legend class="dso-label-container">
                    <span class="control-label">
                        Brandstof
                    </span>

                </legend>
                <div class="dso-field-container">

                    <div class="dso-selectable">
                        <input type="radio" id="brandstof-0" name="brandstof" value="1">
                        <label for="brandstof-0">
                            benzine
                        </label>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="brandstof-1" name="brandstof" value="2">
                        <label for="brandstof-1">
                            diesel
                        </label>

                    </div>

                </div>

            </fieldset>

            <fieldset class="form-group dso-radios">
                <legend class="dso-label-container">
                    <span class="control-label">
                        Schrijfwaar
                    </span>

                </legend>
                <div class="dso-field-container">

                    <div class="dso-selectable">
                        <input type="radio" id="schrijfwaar-0" name="schrijfwaar" value="1">
                        <label for="schrijfwaar-0">
                            pen
                        </label>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="schrijfwaar-1" name="schrijfwaar" value="2">
                        <label for="schrijfwaar-1">
                            potlood
                        </label>

                    </div>

                </div>

            </fieldset>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="omgevingsvergunningHuisnummer" class="control-label">
                        Huisnummer
                    </label>

                </div>
                <div class="dso-field-container">

                    <input type="text" id="omgevingsvergunningHuisnummer" class="form-control" size="8">

                </div>

            </div>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="omgevingsvergunningToevoeging" class="control-label">
                        Huisnummer toevoeging
                    </label>

                </div>
                <div class="dso-field-container">

                    <input type="text" id="omgevingsvergunningToevoeging" class="form-control" size="8">

                </div>

            </div>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="omgevingsvergunningStraatnaam" class="control-label">
                        Straatnaam
                    </label>

                </div>
                <div class="dso-field-container">

                    <input type="text" id="omgevingsvergunningStraatnaam" class="form-control">

                </div>

            </div>

            <div class="form-group dso-input dso-input-text">
                <div class="dso-label-container">
                    <label for="omgevingsvergunningWoonplaats" class="control-label">
                        Woonplaats
                    </label>

                </div>
                <div class="dso-field-container">

                    <input type="text" id="omgevingsvergunningWoonplaats" class="form-control">

                </div>

            </div>

            <fieldset class="form-group dso-radios">
                <legend class="dso-label-container">
                    <span class="control-label">
                        Type melder
                    </span>

                </legend>
                <div class="dso-field-container">

                    <div class="dso-selectable">
                        <input type="radio" id="type_melder-0" name="type_melder" value="particulier">
                        <label for="type_melder-0">
                            particulier
                        </label>

                    </div>

                    <div class="dso-selectable">
                        <input type="radio" id="type_melder-1" name="type_melder" value="bedrijf">
                        <label for="type_melder-1">
                            bedrijf
                        </label>

                    </div>

                </div>

            </fieldset>

            <div class="dso-form-buttons">

                <button type="submit" class="btn btn-primary"><span>Volgende stap</span></button>

            </div>

        </div>
    </div>
    <div class="dso-accordion-section dso-open">
        <h5 class="dso-section-handle"><button type="button" aria-expanded="true">Stap met formulier met meerdere fieldsets

            </button>
        </h5>
        <div class="dso-section-body">

            <fieldset>
                <legend>Adresgegevens</legend>

                <div class="form-group dso-input dso-input-text">
                    <div class="dso-label-container">
                        <label for="omgevingsvergunningPostcode" class="control-label">
                            Postcode
                        </label>

                    </div>
                    <div class="dso-field-container">

                        <input type="text" id="omgevingsvergunningPostcode" class="form-control" size="8">

                    </div>

                </div>

                <div class="form-group dso-input dso-input-text">
                    <div class="dso-label-container">
                        <label for="omgevingsvergunningHuisnummer" class="control-label">
                            Huisnummer
                        </label>

                    </div>
                    <div class="dso-field-container">

                        <input type="text" id="omgevingsvergunningHuisnummer" class="form-control" size="8">

                    </div>

                </div>

                <div class="form-group dso-input dso-input-text">
                    <div class="dso-label-container">
                        <label for="omgevingsvergunningToevoeging" class="control-label">
                            Huisnummer toevoeging
                        </label>

                    </div>
                    <div class="dso-field-container">

                        <input type="text" id="omgevingsvergunningToevoeging" class="form-control" size="8">

                    </div>

                </div>

                <div class="form-group dso-input dso-input-text">
                    <div class="dso-label-container">
                        <label for="omgevingsvergunningStraatnaam" class="control-label">
                            Straatnaam
                        </label>

                    </div>
                    <div class="dso-field-container">

                        <input type="text" id="omgevingsvergunningStraatnaam" class="form-control">

                    </div>

                </div>

                <div class="form-group dso-input dso-input-text">
                    <div class="dso-label-container">
                        <label for="omgevingsvergunningWoonplaats" class="control-label">
                            Woonplaats
                        </label>

                    </div>
                    <div class="dso-field-container">

                        <input type="text" id="omgevingsvergunningWoonplaats" class="form-control">

                    </div>

                </div>

            </fieldset>

            <fieldset>
                <legend>Melder gegevens</legend>

                <fieldset class="form-group dso-radios">
                    <legend class="dso-label-container">
                        <span class="control-label">
                            Type melder
                        </span>

                    </legend>
                    <div class="dso-field-container">

                        <div class="dso-selectable">
                            <input type="radio" id="type_melder-0" name="type_melder" value="particulier">
                            <label for="type_melder-0">
                                particulier
                            </label>

                        </div>

                        <div class="dso-selectable">
                            <input type="radio" id="type_melder-1" name="type_melder" value="bedrijf">
                            <label for="type_melder-1">
                                bedrijf
                            </label>

                        </div>

                    </div>

                </fieldset>

            </fieldset>

            <div class="dso-form-buttons">

                <button type="button" class="btn btn-link"><span>Annuleren</span></button>

                <button type="submit" class="btn btn-primary"><span>Verstuur</span></button>

            </div>

        </div>
    </div>
</div>
<!-- Compact -->
<div class="dso-accordion dso-accordion-compact">
    <div class="dso-accordion-section dso-open">
        <h3 class="dso-section-handle"><button type="button" aria-expanded="true">Sectie titel (active)

            </button>
        </h3>
        <div class="dso-section-body">

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Sectie titel (active)</strong></p>
                <p>Semantisch klopt deze pagina niet, maar om de styling voor de verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>

            </div>

        </div>
    </div>
    <div class="dso-accordion-section">
        <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Sectie titel

            </button>
        </h3>
    </div>
    <div class="dso-accordion-section">
        <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Sectie titel

            </button>
        </h3>
    </div>
    <div class="dso-accordion-section">
        <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula, ipsum eu porttitor cursus, metus ante ultricies quam, quis egestas urna justo a quam.

            </button>
        </h3>
    </div>
</div>
<!-- Compact Met Links -->
<div class="dso-accordion dso-accordion-compact">
    <div class="dso-accordion-section dso-open">
        <h3 class="dso-section-handle">
            <a href="#" aria-expanded="true">
                Sectie titel (active)

            </a>
        </h3>

        <div class="dso-section-body">

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Sectie titel (active)</strong></p>
                <p>Semantisch klopt deze pagina niet, maar om de styling voor de verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>

            </div>

        </div>
    </div>
    <div class="dso-accordion-section">
        <h3 class="dso-section-handle">
            <a href="#" aria-expanded="false">
                Sectie titel

            </a>
        </h3>

    </div>
    <div class="dso-accordion-section">
        <h3 class="dso-section-handle">
            <a href="#" aria-expanded="false">
                Sectie titel

            </a>
        </h3>

    </div>
    <div class="dso-accordion-section">
        <h3 class="dso-section-handle">
            <a href="#" aria-expanded="false">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula, ipsum eu porttitor cursus, metus ante ultricies quam, quis egestas urna justo a quam.

            </a>
        </h3>

    </div>
</div>
<div {{ className('dso-accordion', modifiers) }}>
  {%- for section in sections -%}
    <div {{ className('dso-accordion-section', [section.state, 'dso-' + section.state], [section.open, 'dso-open'], [section.sections, 'dso-nested-accordion']) }}>
      <{{ section.header if section.header else 'h3' }} class="dso-section-handle">
      {%- if section.type === 'link' %}
        <a href="#" aria-expanded={% if section.open %}"true"{% else %}"false"{%endif%}>
      {% else -%}
        <button type="button" aria-expanded={% if section.open %}"true"{% else %}"false"{%endif%}>
      {%- endif -%}

      {%- if section.state %}
        <span class="sr-only">
          {%- if section.state === 'success' %}
            succes:
          {%- elif section.state === 'warning' %}
            waarschuwing:
          {%- elif section.state === 'danger' %}
            fout:
          {%- elif section.state === 'info' %}
            info:
          {% endif %}
        </span>
      {% endif -%}

      {{ section.title }}

      {% if section.status %}
        <span class="dso-status">{{ section.status }}</span>
      {%- endif %}

      {% if section.attachments %}
        <dso-attachments-counter count="{{ section.attachments }}"></dso-attachments-counter>
      {% endif %}

      {% if section.type === 'link' %}
        </a>
        </{{ section.header if section.header else 'h3' }}>
      {% else %}
        </button>
        </{{ section.header if section.header else 'h3' }}>
      {%- endif %}

      {%- if section.open %}
        <div class="dso-section-body">
          {% if section.richContent %}
            <div class="dso-rich-content">
              {{ section.richContent | safe }}
            </div>
          {% endif %}
          {% if section.fieldsets %}
            {% render '@form-fieldsets', {fieldsets: section.fieldsets} %}
            {% render '@form-buttons', {buttons: section.buttons} %}
          {% endif %}
          {%- if section.sections %}
            <div {{ className('dso-accordion', section.modifiers) }}>
              {%- for subsection in section.sections -%}
                <div {{ className('dso-accordion-section', [subsection.state, 'dso-' + subsection.state], [subsection.open, 'dso-open'], [subsection.sections, 'dso-nested-accordion']) }}>
                  <{{ subsection.header if subsection.header else 'div' }} class="dso-section-handle">
                  {%- if section.type === 'link' %}
                    <a href="#" aria-expanded={% if subsection.open %}"true"{% else %}"false"{%endif%}>
                  {%- else %}
                    <button type="button" aria-expanded={% if subsection.open %}"true"{% else %}"false"{%endif%}>
                  {% endif %}
                  {%- if subsection.state %}
                    <span class="sr-only">
                      {%- if subsection.state === 'success' %}
                        succes:
                      {%- elif subsection.state === 'warning' %}
                        waarschuwing:
                      {%- elif subsection.state === 'danger' %}
                        fout:
                      {%- elif subsection.state === 'info' %}
                        info:
                      {% endif %}
                    </span>
                  {% endif -%}

                  {{ subsection.title }}

                  {% if subsection.status %}
                    <span class="dso-status">{{ subsection.status }}</span>
                  {% endif %}

                  {% if subsection.attachments %}
                    <dso-attachments-counter count="{{ subsection.attachments }}"></dso-attachments-counter>
                  {% endif %}

                  {% if section.type === 'link' %}
                    </a>
                    </{{ subsection.header if subsection.header else 'div' }}>
                  {% else %}
                    </button>
                    </{{ subsection.header if subsection.header else 'div' }}>
                  {% endif %}

                  {% if subsection.open %}
                    <div class="dso-section-body">
                      {% if subsection.richContent %}
                        <div class="dso-rich-content">
                          {{ subsection.richContent | safe }}
                        </div>
                      {% endif %}
                      {% if subsection.fieldsets %}
                        {% render '@form-fieldsets', {fieldsets: subsection.fieldsets} %}
                        {% render '@form-buttons', {buttons: subsection.buttons} %}
                      {% endif %}
                    </div>
                  {% endif %}
                </div>
              {%- endfor %}
            </div>
          {% endif %}
        </div>
      {%- endif %}
    </div>
  {%- endfor %}
</div>
/* Default */
__title: default
sections:
  - title: Oprit (h2)
    id: panel_oprit
    header: h2
  - title: Woning (h3)
    id: panel1
    open: true
    header: h3
    richContent: >
      <p>Dit is de inhoud van <strong>Woning (h2)</strong></p>

      <p>Semantisch klopt deze pagina niet, maar om de styling voor de
      verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle
      varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>,
      <code>h5</code>)</p>
  - title: Bouwwerkzaamheden (h4)
    id: panel2
    state: success
    header: h4
  - title: Plaats van het bouwwerk (h5)
    id: panel3
    state: warning
    header: h5
    richContent: >
      <p>Dit is de inhoud van <strong>Plaats van het bouwwerk (h4)</strong></p>

      <p>Semantisch klopt deze pagina niet, maar om de styling voor de
      verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle
      varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>,
      <code>h5</code>)</p>
    open: true
    sections:
      - title: Woning (h2)
        id: panel1
        header: h2
      - title: Bouwwerkzaamheden (h3)
        id: panel2
        open: true
        state: success
        header: h3
        richContent: >
          <p>Dit is een geneste accordion. De inhoud is van
          <strong>Bouwwerkzaamheden (h3)</strong>. Zie de <em>Notes</em> van dit
          component.</p>
      - title: Plaats van het bouwwerk (h4)
        id: panel3
        state: warning
        header: h4
      - title: Afmetingen van het bouwwerk (h5)
        id: panel4
        state: info
        header: h5
      - title: Extra werkzaamheden (h5)
        id: panel5
        state: danger
        header: h5
  - title: Afmetingen van het bouwwerk (h5)
    id: panel4
    state: info
    header: h5
  - title: Extra werkzaamheden (h5)
    id: panel5
    state: danger
    header: h5
    status: 5 van 8 beantwoord
  - title: Optionele werkzaamheden (h5)
    id: panel6
    state: warning
    header: h5
    richContent: >
      <p>Dit is de inhoud van <strong>Optionele werkzaamheden (h5)</strong></p>

      <p>Semantisch klopt deze pagina niet, maar om de styling voor de
      verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle
      varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>,
      <code>h5</code>)</p>
    open: true
    status: 6 van 8 beantwoord
  - title: Bijgevoegde werkzaamheden (h5)
    id: panel7
    header: h5
    attachments: 2
  - title: Afsluitende werkzaamheden (h5)
    id: panel8
    header: h5
    status: 7 van 8 beantwoord
  - title: Evaluatie werkzaamheden (h5)
    id: panel8
    header: h5
    attachments: 1
    richContent: >
      <p>Dit is de inhoud van <strong>Evaluatie werkzaamheden (h5)</strong></p>

      <p>Semantisch klopt deze pagina niet, maar om de styling voor de
      verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle
      varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>,
      <code>h5</code>)</p>
    open: true
/* Default Met Links */
__title: default met links
sections:
  - title: Oprit (h2)
    id: panel_oprit
    type: link
    header: h2
  - title: Woning (h3)
    id: panel1
    type: link
    open: true
    header: h3
    richContent: >
      <p>Dit is de inhoud van <strong>Woning (h2)</strong></p>

      <p>Semantisch klopt deze pagina niet, maar om de styling voor de
      verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle
      varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>,
      <code>h5</code>)</p>
  - title: Bouwwerkzaamheden (h4)
    id: panel2
    type: link
    state: success
    header: h4
  - title: Plaats van het bouwwerk (h5)
    id: panel3
    type: link
    state: warning
    header: h5
    richContent: >
      <p>Dit is de inhoud van <strong>Plaats van het bouwwerk (h4)</strong></p>

      <p>Semantisch klopt deze pagina niet, maar om de styling voor de
      verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle
      varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>,
      <code>h5</code>)</p>
    open: true
    sections:
      - title: Woning (h2)
        id: panel1
        type: link
        header: h2
      - title: Bouwwerkzaamheden (h3)
        id: panel2
        type: link
        open: true
        state: success
        header: h3
        richContent: >
          <p>Dit is een geneste accordion. De inhoud is van
          <strong>Bouwwerkzaamheden (h3)</strong>. Zie de <em>Notes</em> van dit
          component.</p>
      - title: Plaats van het bouwwerk (h4)
        id: panel3
        type: link
        state: warning
        header: h4
      - title: Afmetingen van het bouwwerk (h5)
        id: panel4
        type: link
        state: info
        header: h5
      - title: Extra werkzaamheden (h5)
        id: panel5
        type: link
        state: danger
        header: h5
  - title: Afmetingen van het bouwwerk (h5)
    id: panel4
    type: link
    state: info
    header: h5
  - title: Extra werkzaamheden (h5)
    id: panel5
    type: link
    state: danger
    header: h5
    status: 5 van 8 beantwoord
  - title: Optionele werkzaamheden (h5)
    id: panel6
    type: link
    state: warning
    header: h5
    richContent: >
      <p>Dit is de inhoud van <strong>Optionele werkzaamheden (h5)</strong></p>

      <p>Semantisch klopt deze pagina niet, maar om de styling voor de
      verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle
      varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>,
      <code>h5</code>)</p>
    open: true
    status: 6 van 8 beantwoord
  - title: Bijgevoegde werkzaamheden (h5)
    id: panel7
    type: link
    header: h5
    attachments: 2
  - title: Afsluitende werkzaamheden (h5)
    id: panel8
    type: link
    header: h5
    status: 7 van 8 beantwoord
  - title: Evaluatie werkzaamheden (h5)
    id: panel8
    type: link
    header: h5
    attachments: 1
    richContent: >
      <p>Dit is de inhoud van <strong>Evaluatie werkzaamheden (h5)</strong></p>

      <p>Semantisch klopt deze pagina niet, maar om de styling voor de
      verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle
      varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>,
      <code>h5</code>)</p>
    open: true
/* Default Met Formulier */
__title: default met formulier
sections:
  - title: Stap met formulier zonder fieldset
    id: panel1
    open: true
    fieldsets:
      - groups:
          - id: omgevingsvergunningPostcode
            inputType: input
            type: text
            label: Postcode
            size: 8
          - id: brandstof
            label: Brandstof
            inputType: radios
            options:
              - value: 1
                label: benzine
              - value: 2
                label: diesel
          - id: schrijfwaar
            label: Schrijfwaar
            inputType: radios
            options:
              - value: 1
                label: pen
              - value: 2
                label: potlood
          - id: omgevingsvergunningHuisnummer
            inputType: input
            type: text
            label: Huisnummer
            size: 8
          - id: omgevingsvergunningToevoeging
            inputType: input
            type: text
            label: Huisnummer toevoeging
            size: 8
          - id: omgevingsvergunningStraatnaam
            inputType: input
            type: text
            label: Straatnaam
          - id: omgevingsvergunningWoonplaats
            inputType: input
            type: text
            label: Woonplaats
          - id: type_melder
            inputType: radios
            label: Type melder
            options:
              - value: particulier
                label: particulier
              - value: bedrijf
                label: bedrijf
    buttons:
      - type: submit
        modifier: primary
        label: Volgende stap
  - title: Stap met formulier met meerdere fieldsets
    id: panel6
    open: true
    header: h5
    fieldsets:
      - legend: Adresgegevens
        groups:
          - id: omgevingsvergunningPostcode
            inputType: input
            type: text
            label: Postcode
            size: 8
          - id: omgevingsvergunningHuisnummer
            inputType: input
            type: text
            label: Huisnummer
            size: 8
          - id: omgevingsvergunningToevoeging
            inputType: input
            type: text
            label: Huisnummer toevoeging
            size: 8
          - id: omgevingsvergunningStraatnaam
            inputType: input
            type: text
            label: Straatnaam
          - id: omgevingsvergunningWoonplaats
            inputType: input
            type: text
            label: Woonplaats
      - legend: Melder gegevens
        groups:
          - id: type_melder
            inputType: radios
            label: Type melder
            options:
              - value: particulier
                label: particulier
              - value: bedrijf
                label: bedrijf
    buttons:
      - type: button
        modifier: link
        label: Annuleren
      - type: submit
        modifier: primary
        label: Verstuur
/* Compact */
__title: compact
sections:
  - title: Sectie titel (active)
    id: panel1
    header: h3
    richContent: >
      <p>Dit is de inhoud van <strong>Sectie titel (active)</strong></p>

      <p>Semantisch klopt deze pagina niet, maar om de styling voor de
      verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle
      varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>,
      <code>h5</code>)</p>
    open: true
  - title: Sectie titel
    id: panel2
    header: h3
  - title: Sectie titel
    id: panel3
    header: h3
  - title: >-
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
      vehicula, ipsum eu porttitor cursus, metus ante ultricies quam, quis
      egestas urna justo a quam.
    id: panel4
    header: h3
modifiers: dso-accordion-compact
/* Compact Met Links */
__title: compact met links
sections:
  - title: Sectie titel (active)
    id: panel1
    type: link
    header: h3
    richContent: >
      <p>Dit is de inhoud van <strong>Sectie titel (active)</strong></p>

      <p>Semantisch klopt deze pagina niet, maar om de styling voor de
      verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle
      varianten in het DOM (<code>h2</code>, <code>h3</code>, <code>h4</code>,
      <code>h5</code>)</p>
    open: true
  - title: Sectie titel
    id: panel2
    type: link
    header: h3
  - title: Sectie titel
    id: panel3
    type: link
    header: h3
  - title: >-
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
      vehicula, ipsum eu porttitor cursus, metus ante ultricies quam, quis
      egestas urna justo a quam.
    id: panel4
    type: link
    header: h3
modifiers: dso-accordion-compact