Hoe maak je een accordion in HTML
Meestal wordt de functionaliteit van accordeons op het web gebouwd met JavaScript. Dat kan werken, maar wist je dat er een betere manier is? Dit kan namelijk met het HTML <details> element.
Bekijk de Pen Details element door Rogier (@rvwebdev) op CodePen.
Het <details> element, ook bekend als het details disclosure element, heeft ingebouwde functionaliteit om te wisselen tussen een open en gesloten staat. Het openen of sluiten van het element wisselt een open attribuut op het <details> element. De voordelen hiervan zijn dat dit element kant en klaar werkt als een accordeon, zonder het gebruik van CSS of JavaScript.
Optionele uitbreidingen
Het <details> element werkt dus al als een accordeon-element. Maar we kunnen het verbeteren met wat CSS en JavaScript om het nog beter te maken en toch toegankelijk.
CSS uitbreidingen
Eerst zullen we een pointer cursor toevoegen aan het <summary> element om duidelijker te maken dat er op geklikt kan worden.
summary {
cursor: pointer;
}
Om het standaard icoontje te verwijderen, kunnen we de volgende CSS toevoegen.
summary {
list-style-type: none;
}
summary::-webkit-details-marker {
display: none;
}
Om ons eigen icoontje toe te voegen, kunnen we het ::before pseudo-element gebruiken. Voor nu gebruiken we een plus- en minteken om de open of gesloten toestand aan te geven.
details summary::before {
content: '+';
display: inline-block;
width: 1rem;
height: 1rem;
}
/* when details is opened */
details[open] summary::before {
content: '-';
}
JavaScript uitbreidingen
Om steeds maar één accordeon open te hebben, kunnen we wat JavaScript toevoegen. We hebben een functie nodig die alle andere details-elementen sluit wanneer het aangeklikte <details> element wordt geopend.
function toggleHandler (event) {
// Only run if accordion is open
if (!event.target.hasAttribute('open')) return;
// Get all open accordions inside parent
let opened = document.querySelectorAll('details[open]');
// Close open ones that aren't current accordion
for (let accordion of opened) {
if (accordion === event.target) continue;
accordion.removeAttribute('open');
}
}
Hierna gaan we luisteren naar een toggle event op het document en roepen we de toggleHandler functie aan.
// The toggle event doesn't bubble, so we need to set the optional third argument, useCapture, to true.
document.addEventListener('toggle', toggleHandler, true);
Resultaat
En dat is het!
