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>.
- 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">
<div class="dso-section-handle"><button type="button" aria-expanded="false">Oprit (div)
</button>
</div>
</div>
<div class="dso-accordion-section dso-open">
<h1 class="dso-section-handle"><button type="button" aria-expanded="true">Woning (h1)
</button>
</h1>
<div class="dso-section-body">
<div class="dso-rich-content">
<p>Dit is de inhoud van <strong>Woning (h1)</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>div</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>
</div>
</div>
</div>
<div class="dso-accordion-section dso-success">
<h2 class="dso-section-handle"><button type="button" aria-expanded="false">
<span class="sr-only">
succes:
</span>
Bouwwerkzaamheden (h2)
</button>
</h2>
</div>
<div class="dso-accordion-section dso-warning dso-open dso-nested-accordion">
<h3 class="dso-section-handle"><button type="button" aria-expanded="true">
<span class="sr-only">
waarschuwing:
</span>
Plaats van het bouwwerk (h3)
</button>
</h3>
<div class="dso-section-body">
<div class="dso-rich-content">
<p>Dit is de inhoud van <strong>Plaats van het bouwwerk (h3)</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>div</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>
</div>
<div class="dso-accordion">
<div class="dso-accordion-section">
<div class="dso-section-handle">
<button type="button" aria-expanded="false">
Woning (div)
</button>
</div>
</div>
<div class="dso-accordion-section dso-success dso-open">
<h2 class="dso-section-handle">
<button type="button" aria-expanded="true">
<span class="sr-only">
succes:
</span>
Bouwwerkzaamheden (h2)
</button>
</h2>
<div class="dso-section-body">
<div class="dso-rich-content">
<p>Dit is een geneste accordion. De inhoud is van <strong>Bouwwerkzaamheden (h2)</strong>. Zie de <em>Notes</em> van dit component.</p>
</div>
</div>
</div>
<div class="dso-accordion-section dso-warning">
<h3 class="dso-section-handle">
<button type="button" aria-expanded="false">
<span class="sr-only">
waarschuwing:
</span>
Plaats van het bouwwerk (h3)
</button>
</h3>
</div>
<div class="dso-accordion-section dso-info">
<h4 class="dso-section-handle">
<button type="button" aria-expanded="false">
<span class="sr-only">
info:
</span>
Afmetingen van het bouwwerk (h4)
</button>
</h4>
</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">
<h4 class="dso-section-handle"><button type="button" aria-expanded="false">
<span class="sr-only">
info:
</span>
Afmetingen van het bouwwerk (h4)
</button>
</h4>
</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>div</code>, <code>h1</code>, <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)
<span class="dso-attachments">2 <span class="sr-only">bijlagen</span></span>
</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)
<span class="dso-attachments">1 <span class="sr-only">bijlage</span></span>
</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>div</code>, <code>h1</code>, <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">
<div class="dso-section-handle">
<a href="#" aria-expanded="false">
Oprit (div)
</a>
</div>
</div>
<div class="dso-accordion-section dso-open">
<h1 class="dso-section-handle">
<a href="#" aria-expanded="true">
Woning (h1)
</a>
</h1>
<div class="dso-section-body">
<div class="dso-rich-content">
<p>Dit is de inhoud van <strong>Woning (h1)</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>div</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>
</div>
</div>
</div>
<div class="dso-accordion-section dso-success">
<h2 class="dso-section-handle">
<a href="#" aria-expanded="false">
<span class="sr-only">
succes:
</span>
Bouwwerkzaamheden (h2)
</a>
</h2>
</div>
<div class="dso-accordion-section dso-warning dso-open dso-nested-accordion">
<h3 class="dso-section-handle">
<a href="#" aria-expanded="true">
<span class="sr-only">
waarschuwing:
</span>
Plaats van het bouwwerk (h3)
</a>
</h3>
<div class="dso-section-body">
<div class="dso-rich-content">
<p>Dit is de inhoud van <strong>Plaats van het bouwwerk (h3)</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>div</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>
</div>
<div class="dso-accordion">
<div class="dso-accordion-section">
<div class="dso-section-handle">
<a href="#" aria-expanded="false">Woning (div)
</a>
</div>
</div>
<div class="dso-accordion-section dso-success dso-open">
<h2 class="dso-section-handle">
<a href="#" aria-expanded="true">
<span class="sr-only">
succes:
</span>
Bouwwerkzaamheden (h2)
</a>
</h2>
<div class="dso-section-body">
<div class="dso-rich-content">
<p>Dit is een geneste accordion. De inhoud is van <strong>Bouwwerkzaamheden (h2)</strong>. Zie de <em>Notes</em> van dit component.</p>
</div>
</div>
</div>
<div class="dso-accordion-section dso-warning">
<h3 class="dso-section-handle">
<a href="#" aria-expanded="false">
<span class="sr-only">
waarschuwing:
</span>
Plaats van het bouwwerk (h3)
</a>
</h3>
</div>
<div class="dso-accordion-section dso-info">
<h4 class="dso-section-handle">
<a href="#" aria-expanded="false">
<span class="sr-only">
info:
</span>
Afmetingen van het bouwwerk (h4)
</a>
</h4>
</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">
<h4 class="dso-section-handle">
<a href="#" aria-expanded="false">
<span class="sr-only">
info:
</span>
Afmetingen van het bouwwerk (h4)
</a>
</h4>
</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>div</code>, <code>h1</code>, <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)
<span class="dso-attachments">2 <span class="sr-only">bijlagen</span></span>
</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)
<span class="dso-attachments">1 <span class="sr-only">bijlage</span></span>
</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>div</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>
</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>div</code>, <code>h1</code>, <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>div</code>, <code>h1</code>, <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 'div' }} 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 %}
<span class="dso-attachments">{{ section.attachments }} <span class="sr-only">bijlage{{ '' if section.attachments === 1 else 'n' }}</span></span>
{% endif %}
{% if section.type === 'link' %}
</a>
</{{ section.header if section.header else 'div' }}>
{% else %}
</button>
</{{ section.header if section.header else 'div' }}>
{%- endif %}
{%- if section.open %}
<div class="dso-section-body">
{% if section.richContent %}
<div class="dso-rich-content">
{{ section.richContent | safe }}
</div>
{% endif %}
{% if section.form %}
{% render '@form', section.form %}
{% 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 %}
<span class="dso-attachments">{{ subsection.attachments }} <span class="sr-only">bijlage{{ '' if subsection.attachments === 1 else 'n' }}</span></span>
{% 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.form %}
{% render '@form', subsection.form %}
{% endif %}
</div>
{% endif %}
</div>
{%- endfor %}
</div>
{% endif %}
</div>
{%- endif %}
</div>
{%- endfor %}
</div>
/* Default */
__title: default
sections:
- title: Oprit (div)
id: panel_oprit
- title: Woning (h1)
id: panel1
open: true
header: h1
richContent: >
<p>Dit is de inhoud van <strong>Woning (h1)</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>div</code>, <code>h1</code>, <code>h2</code>,
<code>h3</code>, <code>h4</code>, <code>h5</code>)</p>
- title: Bouwwerkzaamheden (h2)
id: panel2
state: success
header: h2
- title: Plaats van het bouwwerk (h3)
id: panel3
state: warning
header: h3
richContent: >
<p>Dit is de inhoud van <strong>Plaats van het bouwwerk (h3)</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>div</code>, <code>h1</code>, <code>h2</code>,
<code>h3</code>, <code>h4</code>, <code>h5</code>)</p>
open: true
sections:
- title: Woning (div)
id: panel1
- title: Bouwwerkzaamheden (h2)
id: panel2
open: true
state: success
header: h2
richContent: >
<p>Dit is een geneste accordion. De inhoud is van
<strong>Bouwwerkzaamheden (h2)</strong>. Zie de <em>Notes</em> van dit
component.</p>
- title: Plaats van het bouwwerk (h3)
id: panel3
state: warning
header: h3
- title: Afmetingen van het bouwwerk (h4)
id: panel4
state: info
header: h4
- title: Extra werkzaamheden (h5)
id: panel5
state: danger
header: h5
- title: Afmetingen van het bouwwerk (h4)
id: panel4
state: info
header: h4
- 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>div</code>, <code>h1</code>, <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>div</code>, <code>h1</code>, <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 (div)
id: panel_oprit
type: link
- title: Woning (h1)
id: panel1
type: link
open: true
header: h1
richContent: >
<p>Dit is de inhoud van <strong>Woning (h1)</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>div</code>, <code>h1</code>, <code>h2</code>,
<code>h3</code>, <code>h4</code>, <code>h5</code>)</p>
- title: Bouwwerkzaamheden (h2)
id: panel2
type: link
state: success
header: h2
- title: Plaats van het bouwwerk (h3)
id: panel3
type: link
state: warning
header: h3
richContent: >
<p>Dit is de inhoud van <strong>Plaats van het bouwwerk (h3)</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>div</code>, <code>h1</code>, <code>h2</code>,
<code>h3</code>, <code>h4</code>, <code>h5</code>)</p>
open: true
sections:
- title: Woning (div)
id: panel1
type: link
- title: Bouwwerkzaamheden (h2)
id: panel2
type: link
open: true
state: success
header: h2
richContent: >
<p>Dit is een geneste accordion. De inhoud is van
<strong>Bouwwerkzaamheden (h2)</strong>. Zie de <em>Notes</em> van dit
component.</p>
- title: Plaats van het bouwwerk (h3)
id: panel3
type: link
state: warning
header: h3
- title: Afmetingen van het bouwwerk (h4)
id: panel4
type: link
state: info
header: h4
- title: Extra werkzaamheden (h5)
id: panel5
type: link
state: danger
header: h5
- title: Afmetingen van het bouwwerk (h4)
id: panel4
type: link
state: info
header: h4
- 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>div</code>, <code>h1</code>, <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>div</code>, <code>h1</code>, <code>h2</code>,
<code>h3</code>, <code>h4</code>, <code>h5</code>)</p>
open: true
/* 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>div</code>, <code>h1</code>, <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>div</code>, <code>h1</code>, <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