Accordion
Component preview opent in nieuw tabbladHet 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>.
- 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
- 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
- U.S. Web Design System (USWDS). Components Accordion. Geraadpleegd op 20 maart 2020, van https://designsystem.digital.gov/components/accordion/
- NN/g Nielsen Norman Group. Accordions complex content. Geraadpleegd op 20 maart 2020, van https://www.nngroup.com/articles/accordions-complex-content
- W3C. (2019, 14 augustus). WAI-ARIA Authoring Practices 1.1: 3.1 Accordion (Sections With Show/Hide Functionality)Geraadpleegd op 23 juli 2020, van https://www.w3.org/TR/wai-aria-practices/#accordion
<!-- 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="default_form1" class="control-label">
Postcode
</label>
</div>
<div class="dso-field-container">
<input type="text" id="default_form1" class="form-control" size="8">
</div>
</div>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Brandstof</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Brandstof
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="default_form2-0" name="default_form2" value="1">
<label for="default_form2-0">
benzine
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="default_form2-1" name="default_form2" value="2">
<label for="default_form2-1">
diesel
</label>
</div>
</div>
</fieldset>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Schrijfwaar</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Schrijfwaar
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="default_form3-0" name="default_form3" value="1">
<label for="default_form3-0">
pen
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="default_form3-1" name="default_form3" value="2">
<label for="default_form3-1">
potlood
</label>
</div>
</div>
</fieldset>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="default_form4" class="control-label">
Huisnummer
</label>
</div>
<div class="dso-field-container">
<input type="text" id="default_form4" class="form-control" size="8">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="default_form5" class="control-label">
Huisnummer toevoeging
</label>
</div>
<div class="dso-field-container">
<input type="text" id="default_form5" class="form-control" size="8">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="default_form6" class="control-label">
Straatnaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="default_form6" class="form-control">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="default_form7" class="control-label">
Woonplaats
</label>
</div>
<div class="dso-field-container">
<input type="text" id="default_form7" class="form-control">
</div>
</div>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Type melder</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Type melder
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="default_form8-0" name="default_form8" value="particulier">
<label for="default_form8-0">
particulier
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="default_form8-1" name="default_form8" value="bedrijf">
<label for="default_form8-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="default_form-fieldsets1" class="control-label">
Postcode
</label>
</div>
<div class="dso-field-container">
<input type="text" id="default_form-fieldsets1" class="form-control" size="8">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="default_form-fieldsets2" class="control-label">
Huisnummer
</label>
</div>
<div class="dso-field-container">
<input type="text" id="default_form-fieldsets2" class="form-control" size="8">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="default_form-fieldsets3" class="control-label">
Huisnummer toevoeging
</label>
</div>
<div class="dso-field-container">
<input type="text" id="default_form-fieldsets3" class="form-control" size="8">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="default_form-fieldsets4" class="control-label">
Straatnaam
</label>
</div>
<div class="dso-field-container">
<input type="text" id="default_form-fieldsets4" class="form-control">
</div>
</div>
<div class="form-group dso-input dso-input-text">
<div class="dso-label-container">
<label for="default_form-fieldsets5" class="control-label">
Woonplaats
</label>
</div>
<div class="dso-field-container">
<input type="text" id="default_form-fieldsets5" class="form-control">
</div>
</div>
</fieldset>
<fieldset>
<legend>Melder gegevens</legend>
<fieldset class="form-group dso-radios">
<legend class="sr-only">Type melder</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Type melder
</span>
</div>
<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>
<!-- Default Met Definition List -->
<div class="dso-accordion">
<div class="dso-accordion-section dso-open">
<h3 class="dso-section-handle"><button type="button" aria-expanded="true">Stap met definition-list
</button>
</h3>
<div class="dso-section-body">
<dl>
<dt>Indienen bij:</dt>
<dd>Gemeente Den Haag</dd>
<dt>Soort:</dt>
<dd>Melding</dd>
<dt>Bevat:</dt>
<dd>Milieubelastende activiteit - Vergunning (Gemeente)</dd>
<dt>Omgevingsoverleg mogelijk:</dt>
<dd>Ja</dd>
</dl>
</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.definitions %}
{% render '@definition-list', {definitions: section.definitions} %}
{% 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.definitions %}
{% render '@definition-list', {definitions: subsection.definitions} %}
{% 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: default_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: default_panel2
state: success
header: h4
- title: Plaats van het bouwwerk (h5)
id: default_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: default_subpanel1
header: h2
- title: Bouwwerkzaamheden (h3)
id: default_subpanel2
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: default_subpanel3
state: warning
header: h4
- title: Afmetingen van het bouwwerk (h5)
id: default_subpanel4
state: info
header: h5
- title: Extra werkzaamheden (h5)
id: default_subpanel5
state: danger
header: h5
- title: Afmetingen van het bouwwerk (h5)
id: default_panel4
state: info
header: h5
- title: Extra werkzaamheden (h5)
id: default_panel5
state: danger
header: h5
status: 5 van 8 beantwoord
- title: Optionele werkzaamheden (h5)
id: default_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: default_panel7
header: h5
attachments: 2
- title: Afsluitende werkzaamheden (h5)
id: default_panel8
header: h5
status: 7 van 8 beantwoord
- title: Evaluatie werkzaamheden (h5)
id: default_panel9
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: default-links_panel1
type: link
header: h2
- title: Woning (h3)
id: default-links_panel2
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: default-links_panel3
type: link
state: success
header: h4
- title: Plaats van het bouwwerk (h5)
id: default-links_panel4
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: default-links_subpanel1
type: link
header: h2
- title: Bouwwerkzaamheden (h3)
id: default-links_subpanel2
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: default-links_subpanel3
type: link
state: warning
header: h4
- title: Afmetingen van het bouwwerk (h5)
id: default-links_subpanel4
type: link
state: info
header: h5
- title: Extra werkzaamheden (h5)
id: default-links_subpanel5
type: link
state: danger
header: h5
- title: Afmetingen van het bouwwerk (h5)
id: default-links_panel5
type: link
state: info
header: h5
- title: Extra werkzaamheden (h5)
id: default-links_panel6
type: link
state: danger
header: h5
status: 5 van 8 beantwoord
- title: Optionele werkzaamheden (h5)
id: default-links_panel7
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: default-links_panel8
type: link
header: h5
attachments: 2
- title: Afsluitende werkzaamheden (h5)
id: default-links_panel9
type: link
header: h5
status: 7 van 8 beantwoord
- title: Evaluatie werkzaamheden (h5)
id: default-links_panel10
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: default-formulier_panel1
open: true
fieldsets:
- groups:
- id: default_form1
inputType: input
type: text
label: Postcode
size: 8
- id: default_form2
label: Brandstof
inputType: radios
options:
- value: 1
label: benzine
- value: 2
label: diesel
- id: default_form3
label: Schrijfwaar
inputType: radios
options:
- value: 1
label: pen
- value: 2
label: potlood
- id: default_form4
inputType: input
type: text
label: Huisnummer
size: 8
- id: default_form5
inputType: input
type: text
label: Huisnummer toevoeging
size: 8
- id: default_form6
inputType: input
type: text
label: Straatnaam
- id: default_form7
inputType: input
type: text
label: Woonplaats
- id: default_form8
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: default-formulier_panel2
open: true
header: h5
fieldsets:
- legend: Adresgegevens
groups:
- id: default_form-fieldsets1
inputType: input
type: text
label: Postcode
size: 8
- id: default_form-fieldsets2
inputType: input
type: text
label: Huisnummer
size: 8
- id: default_form-fieldsets3
inputType: input
type: text
label: Huisnummer toevoeging
size: 8
- id: default_form-fieldsets4
inputType: input
type: text
label: Straatnaam
- id: default_form-fieldsets5
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
/* Default Met Definition List */
__title: default met definition-list
sections:
- title: Stap met definition-list
id: default-definition-list_panel1
open: true
definitions:
- term: 'Indienen bij:'
descriptions:
- description: Gemeente Den Haag
- term: 'Soort:'
descriptions:
- description: Melding
- term: 'Bevat:'
descriptions:
- description: Milieubelastende activiteit - Vergunning (Gemeente)
- term: 'Omgevingsoverleg mogelijk:'
descriptions:
- description: Ja
/* Compact */
__title: compact
sections:
- title: Sectie titel (active)
id: default-compact_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: default-compact_panel2
header: h3
- title: Sectie titel
id: default-compact_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: default-compact_panel4
header: h3
modifiers: dso-accordion-compact
/* Compact Met Links */
__title: compact met links
sections:
- title: Sectie titel (active)
id: default-compact-links_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: default-compact-links_panel2
type: link
header: h3
- title: Sectie titel
id: default-compact-links_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: default-compact-links_panel4
type: link
header: h3
modifiers: dso-accordion-compact