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';
		}
	});
}