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