How to avoid looping for accessing each element except the first child

May 16, 2023

<div class="container">
   <div class="row m-0 be_product_grid_image">
      <divclass="col_classes">
      <img src="img1.png" />
   </div>
   <div class="row m-0 be_product_grid_image">
      <divclass="col_classes">
      <img src="img2.png" />
   </div>
   <div class="row m-0 be_product_grid_image">
      <divclass="col_classes">
      <img src="img3.png" />
   </div>
   <div class="row m-0 be_product_grid_image">
      <divclass="col_classes">
      <img src="img4.png" />
   </div>
   <div class="row m-0 be_product_grid_image">
      <divclass="col_classes">
      <img src="img5.png" />
   </div>
</div>

I want to show all images except the first image on clicking the ‘show all‘ button
similarly hide all images except first image on clicking ‘show less‘ button

>Solution :

var images = $('.be_product_grid_image:not(:first)');

$(document).on('click', 'your_show_all_button', function() {
     images.show()
})

$(document).on('click', 'your_show_less_button', function() {
     images.hide()
})

Try applying this method by replacing your_show_all_button and your_show_less_button with your buttons’ class or id