window.details = document.querySelectorAll('details');
|
window.toggles = document.querySelectorAll('.toggle-details');
|
|
document.addEventListener('click', (e) => {
|
if (e.target.classList.contains('toggle-details')) {
|
e.target.classList.toggle('open');
|
let on = e.target.classList.contains('open');
|
let section = e.target.dataset.toggle;
|
if (section === 'all') {
|
toggleToggles(on);
|
}
|
|
let span = e.target.querySelector('span');
|
span.textContent = (on) ? 'Close': 'Open';
|
toggleDetails(section, on);
|
}
|
});
|
|
|
console.log(window.details);
|
function toggleDetails(name, toggle) {
|
if (name === 'all') {
|
console.log('Toggling all!');
|
window.details.forEach(detail => {
|
console.log(detail);
|
detail.open = toggle;
|
});
|
} else {
|
for (let detail of window.details) {
|
if (detail.dataset.section === name) {
|
detail.open = toggle;
|
}
|
}
|
}
|
}
|
|
function toggleToggles(on) {
|
window.toggles.forEach(toggle => {
|
if (toggle.dataset.toggle !== 'all') {
|
toggle.querySelector('span').textContent = (on) ? 'Close' : 'Open';
|
}
|
});
|
}
|
