Accordion
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.
<!-- 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