DSO Toolkit homepage

Description

Component preview opent in nieuw tabblad

Het Description element bestaat in twee varianten: .dso-description-term en .dso-description-note.

Het content element (.dso-description-content) moet direct na het Description element worden gebruikt. Het tonen/verbergen van de content kan met een .dso-open modifier op .dso-description-term, maar het content element mag ook scriptend volledig achterwege worden gelaten.

Als scriptend het content element achterwege wordt gelaten, moet bij het tonen van de content nog steeds .dso-open op het term element geplaatst worden, en het content element moet nog steeds direct na het term element worden geplaatst.

<!-- Default -->
Om interpretatieproblemen te voorkomen heeft het
<a id="description--default-term" href="#description--default-content" class="dso-description-term" aria-expanded="false" aria-controls="description--default-content">W3C</a>
<span id="description--default-content" class="dso-description-content">World Wide Web Consortium<a href="#description--default-term">
        <span class="sr-only">Verbergen</span>
    </a>
</span>
aanbevelingen opgesteld over welke tags geldig zijn en hoe ze moeten worden geïnterpreteerd. De oorspronkelijke aanbeveling is een aantal malen geactualiseerd in verband met verdere ontwikkeling van HTML.
<!-- Expanded -->
Om interpretatieproblemen te voorkomen heeft het
<a id="description--expanded-term" href="#description--expanded-content" class="dso-description-term dso-open" aria-expanded="true" aria-controls="description--expanded-content">W3C</a>
<span id="description--expanded-content" class="dso-description-content">World Wide Web Consortium<a href="#description--expanded-term">
        <span class="sr-only">Verbergen</span>
    </a>
</span>
aanbevelingen opgesteld over welke tags geldig zijn en hoe ze moeten worden geïnterpreteerd. De oorspronkelijke aanbeveling is een aantal malen geactualiseerd in verband met verdere ontwikkeling van HTML.
<!-- Note -->
Zo adviseert het Adviescollege Stikstofproblematiek
<a id="description--note-term" href="#description--note-content" class="dso-description-note" aria-expanded="false" aria-controls="description--note-content"><sup>1</sup></a>
<span id="description--note-content" class="dso-description-content">Adviescollege Stikstofproblematiek, <em>"Niet alles kan"</em>. Amersfoort, 2019<a href="#description--note-term">
        <span class="sr-only">Verbergen</span>
    </a>
</span>
bij het vinden van oplossingen uit te gaan van de grote transities om te zorgen voor meer integrale afweging.
<!-- Note Expanded -->
Zo adviseert het Adviescollege Stikstofproblematiek
<a id="description--note-expanded-term" href="#description--note-expanded-content" class="dso-description-note dso-open" aria-expanded="true" aria-controls="description--note-expanded-content"><sup>1</sup></a>
<span id="description--note-expanded-content" class="dso-description-content">Adviescollege Stikstofproblematiek, <em>"Niet alles kan"</em>. Amersfoort, 2019<a href="#description--note-expanded-term">
        <span class="sr-only">Verbergen</span>
    </a>
</span>
bij het vinden van oplossingen uit te gaan van de grote transities om te zorgen voor meer integrale afweging.
{{ textBefore }}
<a
  id="{{ _self.handle }}-term"
  href="#{{ _self.handle }}-content"
  {{ className('dso-description-' + type, [open, 'dso-open']) }}
  aria-expanded="{{ true if open else false }}"
  aria-controls="{{ _self.handle }}-content">
  {{- term | safe -}}
</a>
<span id="{{ _self.handle }}-content" class="dso-description-content">
  {{- content | safe -}}
  <a href="#{{ _self.handle }}-term">
    <span class="sr-only">Verbergen</span>
  </a>
</span>
{{ textAfter }}
/* Default */
__title: Term Collapsed
open: false
textBefore: Om interpretatieproblemen te voorkomen heeft het
term: W3C
content: World Wide Web Consortium
textAfter: >-
  aanbevelingen opgesteld over welke tags geldig zijn en hoe ze moeten worden
  geïnterpreteerd. De oorspronkelijke aanbeveling is een aantal malen
  geactualiseerd in verband met verdere ontwikkeling van HTML.
type: term
/* Expanded */
__title: Term Expanded
open: true
textBefore: Om interpretatieproblemen te voorkomen heeft het
term: W3C
content: World Wide Web Consortium
textAfter: >-
  aanbevelingen opgesteld over welke tags geldig zijn en hoe ze moeten worden
  geïnterpreteerd. De oorspronkelijke aanbeveling is een aantal malen
  geactualiseerd in verband met verdere ontwikkeling van HTML.
type: term
/* Note */
__title: Note Collapsed
open: false
textBefore: Zo adviseert het Adviescollege Stikstofproblematiek
term: <sup>1</sup>
content: >-
  Adviescollege Stikstofproblematiek, <em>"Niet alles kan"</em>. Amersfoort,
  2019
textAfter: >-
  bij het vinden van oplossingen uit te gaan van de grote transities om te
  zorgen voor meer integrale afweging.
type: note
/* Note Expanded */
__title: Note Expanded
open: true
textBefore: Zo adviseert het Adviescollege Stikstofproblematiek
term: <sup>1</sup>
content: >-
  Adviescollege Stikstofproblematiek, <em>"Niet alles kan"</em>. Amersfoort,
  2019
textAfter: >-
  bij het vinden van oplossingen uit te gaan van de grote transities om te
  zorgen voor meer integrale afweging.
type: note