I'm a beginner :) and I'm trying to close a dropdown list as soon as another one is selected. Here is so far what I have and I tried to include another loop using a forEach, but I must do something wrong.

Could you please help me ?

Below the simple code in JS without the 2nd loop:

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 -"}
    });
}); 

and here it is with the additioibn of the 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 -"}
    
    });
});