<div class="dso-accordion dso-no-top-border">
    <div class="dso-accordion-section">
        <div class="dso-section-handle">
            <a href="#">Woning</a>
        </div>
    </div>
    <div class="dso-accordion-section dso-success">
        <div class="dso-section-handle">
            <a href="#">Bouwwerkzaamheden</a>
        </div>
    </div>
    <div class="dso-accordion-section dso-warning dso-open">
        <div class="dso-section-handle">
            <a href="#">Plaats van het bouwwerk</a>
        </div>
        <div class="dso-section-body">
            <p>En dit is de inhoud van <strong>Plaats van het bouwwerk</strong></p>

        </div>
    </div>
    <div class="dso-accordion-section dso-info">
        <div class="dso-section-handle">
            <a href="#">Afmetingen van het bouwwerk</a>
        </div>
    </div>
    <div class="dso-accordion-section dso-danger">
        <div class="dso-section-handle">
            <a href="#">Extra werkzaamheden</a>
        </div>
    </div>
</div>
{{#accordion}}
  {{#each sections }}
    {{#accordionSection title }}
      <p>En dit is de inhoud van <strong>{{ title }}</strong></p>
    {{/accordionSection}}
  {{/each}}
{{/accordion}}
modifiers: dso-no-top-border
sections:
  - title: Woning
    id: panel1
  - title: Bouwwerkzaamheden
    id: panel2
    state: success
  - title: Plaats van het bouwwerk
    id: panel3
    state: warning
    open: true
  - title: Afmetingen van het bouwwerk
    id: panel4
    state: info
  - title: Extra werkzaamheden
    id: panel5
    state: danger
  • 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) {
          var self = this;
    
          let html = (
            `<div class="dso-accordion-section${(self.state ? ' dso-' + self.state : '') + (self.open ? ' dso-open' : '') }">
              <div class="dso-section-handle">
                <a href="#">${ title }</a>
              </div>`);
    
          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: 977 Bytes

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 oranje tekst en 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.

De class dso-no-top-border zorgt er voor dat de eerste .dso-accordion-section geen border-top krijgt.