53 lines
1.4 KiB
Plaintext
53 lines
1.4 KiB
Plaintext
/**
|
|
* div
|
|
* div.js-show-hide__toggle
|
|
* toggle here
|
|
* div
|
|
* content here
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
var LSNAME = 'SHOW_HIDE';
|
|
|
|
function addEventHandler(el) {
|
|
el.addEventListener('click', function elClickListener() {
|
|
var newState = el.parentElement.classList.toggle('js-show-hide--collapsed');
|
|
updateLSState(el.dataset.shIndex || null, newState);
|
|
});
|
|
}
|
|
|
|
function updateLSState(index, state) {
|
|
if (!index) {
|
|
return false;
|
|
}
|
|
var lsData = fromLocalStorage();
|
|
lsData[index] = state;
|
|
window.localStorage.setItem(LSNAME, JSON.stringify(lsData));
|
|
}
|
|
|
|
function collapsedStateInLocalStorage(index) {
|
|
return fromLocalStorage()[index] || null;
|
|
}
|
|
|
|
function fromLocalStorage() {
|
|
return JSON.parse(window.localStorage.getItem(LSNAME)) || {};
|
|
}
|
|
|
|
Array
|
|
.from(document.querySelectorAll('.js-show-hide__toggle'))
|
|
.forEach(function(el) {
|
|
var index = el.dataset.shIndex || null;
|
|
el.parentElement.classList.toggle(
|
|
'js-show-hide--collapsed',
|
|
collapsedStateInLocalStorage(index) || el.dataset.collapsed === 'true'
|
|
);
|
|
Array.from(el.parentElement.children).forEach(function(el) {
|
|
if (!el.classList.contains('js-show-hide__toggle')) {
|
|
el.classList.add('js-show-hide__target');
|
|
}
|
|
});
|
|
addEventHandler(el);
|
|
});
|
|
});
|