DSO Component Library

Accordion 

<div class="accordion" id="accordion">
    <div class="panel">
        <div class="section-toggle">
            <span class="toggle-icon fa fa-angle-right"></span>
            <h2>
                <a data-toggle="collapse" data-parent="#accordion" href="#panel1" aria-expanded="false" aria-controls="panel1">Paneel 1</a>
                <span class="fa fa-check" aria-hidden="true"></span>
            </h2>
        </div>
        <div class="section-body collapse" id="panel1">
            <p>En dit is de inhoud van <strong>Paneel 1</strong></p>
        </div>
    </div>
    <div class="panel">
        <div class="section-toggle">
            <span class="toggle-icon fa fa-angle-right"></span>
            <h2>
                <a data-toggle="collapse" data-parent="#accordion" href="#panel2" aria-expanded="false" aria-controls="panel2">Paneel 2</a>
            </h2>
        </div>
        <div class="section-body collapse" id="panel2">
            <p>En dit is de inhoud van <strong>Paneel 2</strong></p>
        </div>
    </div>
    <div class="panel">
        <div class="section-toggle">
            <span class="toggle-icon fa fa-angle-right"></span>
            <h2>
                <a data-toggle="collapse" data-parent="#accordion" href="#panel3" aria-expanded="false" aria-controls="panel3">Paneel 3</a>
            </h2>
        </div>
        <div class="section-body collapse" id="panel3">
            <p>En dit is de inhoud van <strong>Paneel 3</strong></p>
        </div>
    </div>
</div>
 
{{#accordion}}
  {{#each panels }}
    {{#panel title this }}
      <p>En dit is de inhoud van <strong>{{ title }}</strong></p>
    {{/panel}}
  {{/each}}
{{/accordion}}
 
panels:
  - title: Paneel 1
    id: panel1
    icon: fa fa-check
  - title: Paneel 2
    id: panel2
  - title: Paneel 3
    id: panel3
  • Content: 
    // Notes:
// ------
// * Each change to this file needs a restart of the fractal instance
// * Exported methods are merged as helpers in fractal.js
// ToDo: Multiple accordion's are impossible: The @id of each .accordion is fixed.

module.exports = function (fractal) {
  const handlebars = fractal.components.engine().handlebars;

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

    panel(title, context, options) {
      let o = options || context;
      let icon = '';

      return handlebars
        .compile('{{> \'@icon\' }}')({ icon: context.icon })
        .then(i => {
          icon = context.icon && i.trim();

          return o.fn(context);
        })
        .then(content => `
          <div class="panel">
            <div class="section-toggle">
              <span class="toggle-icon fa fa-angle-right"></span>
              <h2>
                <a data-toggle="collapse" data-parent="#accordion" href="#${context.id}" aria-expanded="false" aria-controls="${context.id}">${title}</a>${icon ? '\n' + icon : ''}
              </h2>
            </div>
            <div class="section-body collapse" id="${context.id}">
              ${content.trim()}
            </div>
          </div>
        `.trim());
    }
  };
};
  • URL: /components/raw/accordion/accordion.js
  • Filesystem Path: components\02-content\accordion\accordion.js
  • Size: 1.4 KB

There are no notes for this item.