Question 169253 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I access each element in jQuery without looping, starting from the second child?

<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

Tags:

2

Answers


  1. 0

    Add two buttons for show and hide:

    <button id="showAllBtn" onclick="showAllImages()">Show All</button>
<button id="showLessBtn" onclick="showLessImages()">Show Less</button>

    Add js script for the functionalities:

    function showAllImages() {
   var images = document.querySelectorAll('.be_product_grid_image');

   for (var i = 0; i < images.length; i++) {
      images[i].style.display = 'block';
   }
   document.getElementById('showAllBtn').style.display = 'none';
   document.getElementById('showLessBtn').style.display = 'inline-block';
}

function showLessImages() {
   var images = document.querySelectorAll('.be_product_grid_image');

   for (var i = 1; i < images.length; i++) {
      images[i].style.display = 'none';
   }
   
   document.getElementById('showAllBtn').style.display = 'inline-block';
   document.getElementById('showLessBtn').style.display = 'none';
}
    Login or Signup to reply.
  2. 0 
    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search