在 div 的特定子項上或多或少地切換顯示

Question

我實際上是在嘗試在 Elementor 手風琴上切換特定的 div:nth-child 。 雖然我設法在 Javascript 中對其進行了編碼，但我知道有一種更短、更簡潔的循環方式。 請幫忙。

 .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

有一種更簡單的方法可以做到這一點。

做了一些小的改動並添加了class而不是id因為它會創建更少的代碼。

看看下面

 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

*更新@Alen.toma js 片段。

在切換hidden的 class 之后，使用簡寫if-else更改鏈接的innerText 。 如果有幫助，請接受答案。

 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>