Una solución fácil es realizar un seguimiento de los índices de nodeList con un Array. Hice uno para ti llamado openDetails. Luego, cuando abres un detalle, se agrega a la matriz. Cuando lo cierras, se elimina. Cuando tiene 3 elementos, puede verificar el primer elemento de la lista, cerrar el detalle correspondiente y luego eliminarlo de la lista.

 let openDetails = []; const details = document.querySelectorAll("details"); details.forEach((targetDetail, index) => { targetDetail.addEventListener("click", (event) => { const detailIsOpen = openDetails.includes(index); if (detailIsOpen) { openDetails = openDetails.filter((item) => item !== index); } else { if (openDetails.length > 2) { const indexToClose = openDetails[0]; openDetails = openDetails.filter((item, i) => i !== 0); details[indexToClose].removeAttribute("open"); } openDetails.push(index); } }); });

 <details> <summary>test0</summary> 0 </details> <details> <summary>test1</summary> 1 </details> <details> <summary>test2</summary> 2 </details> <details> <summary>test3</summary> 3 </details>

En lugar de esto,

 const details = document.querySelectorAll("details"); details.forEach((targetDetail) => { targetDetail.addEventListener("click", () => { details.forEach((detail) => { if (detail !== targetDetail) { detail.removeAttribute("open"); } }); }); });

Prueba este, podría funcionar para ti 😉

 const details = document.querySelectorAll("details"); details.forEach((targetDetail) => { targetDetail.addEventListener("click", () => { details.forEach((detail) => { if (detail !== targetDetail) { details.forEach(element => { element.removeAttribute("open"); }); } }); }); });