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.
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.
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.
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.
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.
Let bij implementatie van het accordion op het volgende:
<button>
.<h1>
). Dan krijgt de knop <h2>
.<h2>
heeft. Dan krijgt de geneste knop een <h3>
.<span class="sr-only">(afgerond)</span>
“
<!-- 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