<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
// 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();
}
};
};
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.