Description

Component preview opent in nieuw tabblad

Het content element (.dso-description-content) moet direct na het term element (.dso-description-term) gebruikt worden. 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.
{{ textBefore }}
<a
  id="{{ _self.handle }}-term"
  href="#{{ _self.handle }}-content"
  {{ className('dso-description-term', [open, 'dso-open']) }}
  aria-expanded="{{ true if open else false }}"
  aria-controls="{{ _self.handle }}-content">
  {{- term -}}
</a>
<span id="{{ _self.handle }}-content" class="dso-description-content">
  {{- content -}}
  <a href="#{{ _self.handle }}-term">
    <span class="sr-only">Verbergen</span>
  </a>
</span>
{{ textAfter }}
/* Default */
__title: 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.
/* Expanded */
__title: 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.