Toggle show more or less on particular children of div

Question

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 class="acc-sec" onload="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>

Answer 1

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 class="acc-sec"> <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 class="hidden">This is the fifth div.</div> <div class="hidden">This is the sixth div.</div> <div class="hidden">This is the seventh div.</div> <a class="acc-more" >Show more</a> </div>

Answer 2

* 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.

 document.querySelectorAll(".acc-more").forEach(el => { const hidden = el.parentElement.querySelectorAll(".hidden") const showMoreLess = document.querySelector(".acc-more") el.addEventListener("click", () => { hidden.forEach(h => h.classList.toggle("hidden")) showMoreLess.innerText === "Show more"? showMoreLess.innerText = "Show less": showMoreLess.innerText = "Show more" console.log(showMoreLess) }); });

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

 <div class="acc-sec"> <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 class="hidden">This is the fifth div.</div> <div class="hidden">This is the sixth div.</div> <div class="hidden">This is the seventh div.</div> <a class="acc-more">Show more</a> </div>