De hecho, estoy tratando de alternar div particular: nth-child en un acordeón Elementor. Aunque me las arreglé para codificarlo en Javascript, sé que hay una forma más corta y limpia de hacer un bucle. Por favor ayuda.
.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>Hay una manera mucho más fácil de hacer esto.
realizó pequeños cambios y agregó class en lugar de id , ya que creará menos código.
echa un vistazo a continuación
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>* Actualización del fragmento @Alen.toma js.
Uso abreviado de if-else para cambiar el innerText del enlace justo después de alternar la clase hidden . Acepta la respuesta si te ayuda. 🤗
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>