37 lines
1.0 KiB
Plaintext
37 lines
1.0 KiB
Plaintext
/**
|
|
* div
|
|
* div.js-show-hide__toggle
|
|
* toggle here
|
|
* div
|
|
* content here
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
var elements = Array.from(document.querySelectorAll('.js-show-hide__toggle')),
|
|
toggles = [];
|
|
|
|
function addEventHandler(el) {
|
|
el.addEventListener('click', function elClickListener() {
|
|
var toggle = toggles[el.dataset.index];
|
|
toggle.collapsed = !toggle.collapsed;
|
|
toggle.parent.classList.toggle('js-show-hide--collapsed', toggle.collapsed);
|
|
});
|
|
}
|
|
|
|
elements.forEach(function(el, i) {
|
|
el.dataset.index = i;
|
|
var coll = el.dataset.collapsed === 'true';
|
|
if (coll) {
|
|
el.parentElement.classList.add('js-show-hide--collapsed')
|
|
}
|
|
Array.from(el.parentElement.children).forEach(function(el) {
|
|
if (!el.classList.contains('js-show-hide__toggle')) {
|
|
el.classList.add('js-show-hide__target');
|
|
}
|
|
});
|
|
toggles.push({index: i, collapsed: coll, parent: el.parentElement});
|
|
addEventHandler(el);
|
|
});
|
|
});
|