How to Toggle Multiple Div’s Visibility Using CSS Classes in Javascript
<div class="products-list">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
.hide {
display:none;
}
.products-list{
background:red;
cursor:pointer;
}
const items=document.querySelectorAll(".item")
function toggleHide(){
for(const [index, item] of items.entries()){
if(index < 5) continue;
item.classList.toggle("hide")
}
}
toggleHide();
document.querySelector(".products-list").addEventListener("click", toggleHide)
