<details> <summary>1</summary> Demo 1 </details> <details> <summary>2</summary> Demo 2 </details> <details> <summary>3</summary> Demo 3 </details>
#js code
// Fetch all the details element.
const details = document.querySelectorAll("details");
// Add the onclick listeners.
details.forEach((targetDetail) => {
targetDetail.addEventListener("click", () => {
// Close all the details that are not targetDetail.
details.forEach((detail) => {
if (detail !== targetDetail) {
detail.removeAttribute("open");
}
});
});
});