How to Toggle Multiple DIV’s Visibility Using CSS Classes in Javascript

You are currently viewing How to Toggle Multiple DIV’s Visibility Using CSS Classes in Javascript

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)

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply