DSO Toolkit | Component Library

Description: 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.
 
{{text-before}} {{#dsoDescription term}}{{ content }}{{/dsoDescription}} {{text-after}}
 
__title: Expanded
open: true
text-before: Om interpretatieproblemen te voorkomen heeft het
term: W3C
content: World Wide Web Consortium
text-after: >-
  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.
  • Content: 
    // Notes:
// ------
// * Each change to this file needs a restart of the fractal instance
// * Exported methods are merged as helpers in fractal.js

module.exports = function () {
  return {
    dsoDescription(term, options) {
      return [
        `<a id="${this._self.handle}-term" href="#${this._self.handle}-content" class="dso-description-term${this['open'] ? ' dso-open' : ''}" aria-expanded="${this['open'] ? 'true' : 'false'}" aria-controls="${this._self.handle}-content">${term}</a>`,
        `<span id="${this._self.handle}-content" class="dso-description-content">`,
          `${options.fn(this)}`,
          `<a href="#${this._self.handle}-term">`,
            `<span class="sr-only">Verbergen</span>`,
          `</a>`,
        `</span>`
      ].join('');
    }
  };
};
  • URL: /components/raw/description/description.js
  • Filesystem Path: components/02-content/description/description.js
  • Size: 785 Bytes

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.