I got a list of items in react and I want to show some of them and hide the rest upon clicking the button unhide the rest. The issue I am facing is I do not know how to hide an unknown number of div
<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>
.products-list:nth-child(5){
//how do i target 5th element until to the end (dynamic number of items)
}
document.querySelector(".products-list").addEventListener("click", function(){
//unhide the ones hidden by css
}
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).hide {
display:none;
}
.products-list{
background:red;
cursor:pointer;
}<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>I created a function that iterates over items of node list and toggles hide class for elements with greater index than 4