53 lines
1.5 KiB
Plaintext
53 lines
1.5 KiB
Plaintext
/**
|
|
* div.js-show-hide
|
|
* 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);
|
|
updateLocalStorage();
|
|
});
|
|
}
|
|
|
|
function updateLocalStorage(id) {
|
|
let jsonToggles = JSON.stringify(toggles.map(t => {
|
|
return {id: t.index, collapsed: t.collapsed};
|
|
}));
|
|
window.localStorage.setItem('showHidesToggles', jsonToggles);
|
|
}
|
|
|
|
function collapsedStateInLocalStorage(id, fallBack) {
|
|
let lsData = JSON.parse(window.localStorage.getItem('showHidesToggles'));
|
|
if (lsData[id]) {
|
|
return lsData[id].collapsed;
|
|
}
|
|
return fallBack;
|
|
}
|
|
|
|
elements.forEach(function(el, i) {
|
|
el.dataset.index = i;
|
|
var coll = collapsedStateInLocalStorage(i, el.parentElement.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);
|
|
});
|
|
});
|