sprint4: JS voor details

[vsheo]

als 1 details open is zijn alle andere details elementen op display none

[vsheo]

// als 1 details open gaat, dan gaan de andere op display none

const details = document.querySelectorAll('details');

details.forEach((detailElement) => {
    detailElement.addEventListener('toggle', () => {
        if (detailElement.open) {
            details.forEach((overigDetail) => {
                if (overigDetail !== detailElement) {
                    overigDetail.classList.add('hidden');
                }
            });
        }
    });
});

met javascript kijk ik eerst met een loop door alle details elementen, om te kijken als een geklikt is(open staat). Als een details element open staat, dan gebruik ik nog een loop om alle andere elementen weg e halen. Dit doe ik door de class hidden toe tevoegen aan de details elementen.