Soy un principiante :) y estoy tratando de cerrar una lista desplegable tan pronto como se seleccione otra. Aquí está lo que tengo hasta ahora y traté de incluir otro ciclo usando un forEach, pero debo hacer algo mal.

Me podría ayudar ?

Debajo del código simple en JS sin el segundo ciclo:

 const moreExperiences = document.querySelectorAll(".more"); /*moreExpS : [moreExp1, moreExp2, moreExp3, moreExp4]*/ moreExperiences.forEach(moreExperience => { moreExperience.addEventListener("click", () => { //split from - and take the second element after the - which will be the number (index 1) let elementId = moreExperience.id.split("-")[1]; let activeElId = `#detailsExp-${elementId}`; const activeElements = document.querySelector(activeElId) activeElements.classList.toggle("hide") activeElements.classList.toggle("visibleExp") //******write back see more + // change the text if (moreExperience.innerHTML === "SEE LESS -") { moreExperience.innerHTML = "SEE MORE +" } else { moreExperience.innerHTML = "SEE LESS -"} }); });

y aqui esta con el additioibn del 2nd loop

 moreExperiences.forEach(moreExperience => { moreExperience.addEventListener("click", () => { //split from - and take the second element after the - which will be the number (index 1) let elementId = moreExperience.id.split("-")[1]; let activeElId = `#detailsExp-${elementId}`; const activeElements = document.querySelector(activeElId) activeElements.classList.toggle("hide") activeElements.classList.toggle("visibleExp") //if another element is selected activeElements.forEach(activeElement => { if (activeElement.classList.has("visibleExp")) { activeElement.classList.remove("visibleExp") activeElement.classList.add("hide") } }); //******write back see more + // change the text if (moreExperience.innerHTML === "SEE LESS -") { moreExperience.innerHTML = "SEE MORE +" } else { moreExperience.innerHTML = "SEE LESS -"} }); });