CODEWITHSUNDEEP
jquery
Dustin
Dustin

Reputation: 23

JQuery - Hide element after Classes have been removed

A little new to development so bear with me.

I have a button that removes the class '.hidden' when clicked. Once all '.hidden' classes are removed, I want to hide the '.load-more' element.

var $grid_item_div = $('.grid-item');
grid_item_show = 20;

if ($grid_item_div.length > 5) {
  $grid_item_div.slice(-10).addClass("hidden");
}

$('body').on('click', '.show-content', function() {
  $('.hidden:lt(' + grid_item_show + ')').removeClass('hidden');
});

$grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

$('body').on('click', '.show-content', function() {
  $grid.masonry('layout');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/v2/jquery.masonry.min.js"></script>

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
</div>
<div class="load-more"><button class="show-content">Load More</button</div>

Codepen: https://codepen.io/ddavis82/pen/eYmzOYd

What would be the best method to accomplish this? Thanks in advance

Upvotes: 1

Views: 84

Answers (2)

Pablo Cardozo
Pablo Cardozo

Reputation: 103

Put this validation in te action of removing the .hidden after you remove the hidden class:

if (!$(".hidden")[0]){
   $(".load-more").hide();
}

Upvotes: 0

Sean T
Sean T

Reputation: 2494

Assuming hidden hides an element...

 $('.grid-item').removeClass('hidden');
 $('.load-more').addClass('hidden');

EDIT after thinking about it you're removing hidden class one at a time so you would probably want to check if any more exist instead...

if (!$('.grid-item.hidden').length)//checks if there's any left
{
    $('.load-more').addClass('hidden');
}

Upvotes: 1

Related Questions