DSO Toolkit | Component Library

Accordion 

<div class="dso-accordion">
    <div class="dso-accordion-section">
        <div class="dso-section-handle">
            <a href="#">Oprit (div)</a>
        </div>
    </div>
    <div class="dso-accordion-section dso-open">
        <h1 class="dso-section-handle">
            <a href="#">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="#"><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="#"><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="#">Woning (div)</a>
                    </div>
                </div>
                <div class="dso-accordion-section dso-success dso-open">
                    <h2 class="dso-section-handle">
                        <a href="#"><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="#"><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="#"><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="#"><span class="sr-only">gevaar: </span>Extra werkzaamheden (h5)</a>
                    </h5>
                </div>
            </div>
        </div>
    </div>
    <div class="dso-accordion-section dso-info">
        <h4 class="dso-section-handle">
            <a href="#"><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="#"><span class="sr-only">gevaar: </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="#"><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="#">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="#">Afsluitende werkzaamheden (h5)<span class="dso-status">7 van 8 beantwoord</span></a>
        </h5>
    </div>
</div>
 
{{#accordion}}
  {{#each sections }}
    {{#accordionSection title header=header }}
      <div class="dso-rich-content">
        <p>Dit is de inhoud van <strong>{{ title }}</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>
      {{#if sections }}
        {{#accordion}}
          {{#each sections }}
            {{#accordionSection title header=header }}
              <div class="dso-rich-content">
                <p>Dit is een geneste accordion. De inhoud is van <strong>{{ title }}</strong>. Zie de <em>Notes</em> van dit component.</p>
              </div>
            {{/accordionSection}}
          {{/each}}
        {{/accordion}}
      {{/if}}
    {{/accordionSection}}
  {{/each}}
{{/accordion}}
 
sections:
  - title: Oprit (div)
    id: panel_oprit
  - title: Woning (h1)
    id: panel1
    open: true
    header: h1
  - title: Bouwwerkzaamheden (h2)
    id: panel2
    state: success
    header: h2
  - title: Plaats van het bouwwerk (h3)
    id: panel3
    state: warning
    header: h3
    open: true
    sections:
      - title: Woning (div)
        id: panel1
      - title: Bouwwerkzaamheden (h2)
        id: panel2
        open: true
        state: success
        header: h2
      - 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
    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
  • 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 {
    accordion(options) {
      const classNames = ['dso-accordion', this.modifiers].filter(c => c).join(' ');

      return `
        <div class="${classNames}">
          ${options.fn(this)}
        </div>
      `.trim();
    },

    accordionSection(title, options) {
      const self = this;
      const header = options.hash.header || 'div';

      const termMap = {
        success: 'succes',
        warning: 'waarschuwing',
        info: 'info',
        danger: 'gevaar'
      };

      let html = (
        `<div class="dso-accordion-section${(self.state ? ' dso-' + self.state : '') + (self.open ? ' dso-open' : '') + (self.sections ? ' dso-nested-accordion' : '') }">
          <${header} class="dso-section-handle">
            <a href="#">`);

      const term = self.state;
      if (termMap[term]) {
        html += (`<span class="sr-only">${termMap[term]}: </span>`);
      }

      html += title;

      const status = self.status;
      if (status) {
        html += (`<span class="dso-status">${status}</span>`);
      }

      const attachments = self.attachments;
      if (typeof attachments === 'number') {
        html += (`<span class="dso-attachments">${attachments} <span class="sr-only">bijlage${attachments === 1 ? '' : 'n'}</span></span>`)
      }

      html += (`</a>\n</${header}>`);

      if (self.open) {
        html += (
          `<div class="dso-section-body">
            ${options.fn(self)}
          </div>`
        );
      }

      html += `</div>`;

      return html.trim();
    }
  };
};
  • URL: /components/raw/accordion/accordion.js
  • Filesystem Path: components/02-content/accordion/accordion.js
  • Size: 1.7 KB

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