Jquery - show no. of divs hide others

user_1746604 0
Viewed 66

Used below HTML & JS code for below requirement.

  1. Show first 3 divs, hide rest.
  2. Hide Load more button if less than 3 divs (as per data-show) otherwise show.
  3. On clicking load more button show another 3 (as per data-show value). show/hide load more button based on item exists.
  4. Show load more button still item exists. otherwise hide load more button.

var dataShow = $('.main-wrapper').attr('data-show');
var getEle = $('.main-wrapper').find('.ele');

if (getEle.length <= dataShow) {
  $('.load-more').hide();
} else {
  $('.load-more').show();
}

let getEleLength = $('.ele').length;
let showItems = dataShow - 1;
//$('.ele').slice(0, 3).show();
$('.ele:gt(' + showItems + ')').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-wrapper" data-show="3">
  <div class="ele">1</div>
  <div class="ele">2</div>
  <div class="ele">3</div>
  <div class="ele">4</div>
  <div class="ele">5</div>
</div>

<button class="load-more">Load more</button>

html jquery javascript
1 Answers

Count div using length. Based upon that show() , hide() your div.

let size = $(".ele").length;
let x = parseInt($('.main-wrapper').data('show'));
$('.ele:lt(' + x + ')').show();
$('.load-more').click(function() {
  x = (x + 3 <= size) ? x + 3 : size;
  $('.ele:lt(' + x + ')').show();
  if (x == size) {
    $('.load-more').hide();
  }
});
.ele {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-wrapper" data-show="3">
  <div class="ele">1</div>
  <div class="ele">2</div>
  <div class="ele">3</div>
  <div class="ele">4</div>
  <div class="ele">5</div>
</div>


<button class="load-more">Load more</button>

user_9651460
Related