Let’s suppose you want to build a simple accordion or a help section, and you want to use a <details> element and only have one open at a time. Here is how to do it:
/**
* Details/summary HTML element
* Only open one element at a time
*/
if (document.querySelector('details')) {
// Fetch all the details elements
const details = document.querySelectorAll('details');
// Add onclick listeners
details.forEach((targetDetail) => {
targetDetail.addEventListener("click", () => {
// Close all details that are not targetDetail
details.forEach((detail) => {
if (detail !== targetDetail) {
detail.removeAttribute("open");
}
});
});
});
}
Previous article
JavaScript Form Validation
Next article
