Toggle show more or less on particular children of div-CodePudding

I'm actually trying to toggle particular div:nth-child on an Elementor accordion. Though I managed to code it in Javascript, I know there's a shorter and cleaner way to loop this. Please help.

.acc-sec :nth-child(5), :nth-child(6), :nth-child(7) {
    display: none;
}
#acc-more {
    cursor: pointer;
}

<script>
function showMore() {
    if (document.querySelector("a").innerHTML == "Show more") {
        var shownth5 = document.querySelector(".acc-sec :nth-child(5)");
        shownth5.style.display = "block";    
        var shownth6 = document.querySelector(".acc-sec :nth-child(6)");
        shownth6.style.display = "block";  
        var shownth7 = document.querySelector(".acc-sec :nth-child(7)");
        shownth7.style.display = "block";  
        document.querySelector("a").innerHTML = "Show less";
        document.querySelector("a").addEventListener('click', showLess);     
    } else {
        showLess();
    }
}
function showLess() {
    if (document.querySelector("a").innerHTML == "Show less") {        
        var shownth5 = document.querySelector(".acc-sec :nth-child(5)");
        shownth5.style.display = "none";    
        var shownth6 = document.querySelector(".acc-sec :nth-child(6)");
        shownth6.style.display = "none";  
        var shownth7 = document.querySelector(".acc-sec :nth-child(7)");
        shownth7.style.display = "none";  
        document.querySelector("a").innerHTML = "Show more";
        document.querySelector("a").addEventListener('click', showMore);         
    }else {
        showMore();
    }   
}
</script>
<div  onl oad="loop()">
        <div>This is the first div.</div>
        <div>This is the second div.</div>
        <div>This is the third div.</div>
        <div>This is the fourth div.</div>
        <div id="hidden1">This is the fifth div.</div>
        <div id="hidden2">This is the sixth div.</div>
        <div id="hidden3">This is the seventh div.</div>
        <a id="acc-more" onclick="showMore()">Show more</a>
</div>

CodePudding user response：

There is a much easier way in doing this.

made small changes and added class instead of id as it will create less code.

have a look below

    document.querySelectorAll(".acc-more").forEach(el=>{
     const hidden= el.parentElement.querySelectorAll(".hidden");
     el.addEventListener("click", ()=>{
      hidden.forEach(h=> h.classList.toggle("hidden")) 
      if (hidden[0].classList.contains("hidden"))
          el.innerHTML = "Show more";
        else el.innerHTML = "Show less";
     });
    });

    .acc-sec .hidden {
        display: none;
    }
    #acc-more {
        cursor: pointer;
    }

    <div >
            <div>This is the first div.</div>
            <div>This is the second div.</div>
            <div>This is the third div.</div>
            <div>This is the fourth div.</div>
            <div >This is the fifth div.</div>
            <div >This is the sixth div.</div>
            <div >This is the seventh div.</div>
            <a  >Show more</a>
    </div>

CodePudding user response：

*Updating @Alen.toma js snippet.

Using short-hand if-else for changing the innerText of the link just after toggling the hidden class. Accept the answer if it helps.