Reveal Hidden items in Sets of 3

user_8023299 0
Viewed 38

I have a parent DIV with children DIVs.

  1. The parent div by default lists 12 items (or more) but only shows 6. The rest are rendered but hidden with CSS
  2. There's a "Show More" link at the bottom of the parent div. Clicking on it will reveal 3 more DIVs
  3. There is no "Show Less" so that is not needed - to go backwards

What I have so far: All the above functionality working great. Until... I had to add another parent DIV with the same functionality on the page. Now the second parent "Show More" was activating the first DIV. How can I extend this functionality so that the Show More functionality is contained to the parent - this way, I can add multiple DIV's with the same functionality?

Code below:

HTML

<div class="lo-profile-cards">
<div class="lo-profile-card">Card 1</div>
<div class="lo-profile-card">Card 2</div>
<div class="lo-profile-card">Card 3</div>
<div class="lo-profile-card">Card 4</div>
<div class="lo-profile-card">Card 5</div>
<div class="lo-profile-card">Card 6</div>
<div class="lo-profile-card">Card 7 (hidden, will be revealed with show more)</div>
<div class="lo-profile-card">Card 8 (hidden, will be revealed with show more)</div>
<div class="lo-profile-card">Card 9 (hidden, will be revealed with show more)</div>
<div class="lo-profile-card">Card 10 (hidden, will be revealed with show more pressed second time)</div>
<div class="lo-profile-card">Card 11 (hidden, will be revealed with show more pressed second time</div>
<div class="lo-profile-card">Card 12 (hidden, will be revealed with show more pressed second time</div>
<a href="#" class="show-more-los">Show More</a>
</div>

<!-- SECOND DIV WITH SAME FUNCTIONALITY -->
<div class="lo-profile-cards">
<div class="lo-profile-card">Card 1</div>
<div class="lo-profile-card">Card 2</div>
<div class="lo-profile-card">Card 3</div>
<div class="lo-profile-card">Card 4</div>
<div class="lo-profile-card">Card 5</div>
<div class="lo-profile-card">Card 6</div>
<div class="lo-profile-card">Card 7 (hidden, will be revealed with show more)</div>
<div class="lo-profile-card">Card 8 (hidden, will be revealed with show more)</div>
<div class="lo-profile-card">Card 9 (hidden, will be revealed with show more)</div>
<div class="lo-profile-card">Card 10 (hidden, will be revealed with show more pressed second time)</div>
<div class="lo-profile-card">Card 11 (hidden, will be revealed with show more pressed second time</div>
<div class="lo-profile-card">Card 12 (hidden, will be revealed with show more pressed second time</div>
<a href="#" class="show-more-los">Show More</a>
</div>

JS

// SHOW MORE LOS
    $(function () {
        $('.show-more-los').click(function () {
            $('.lo-profile-cards .lo-profile-card:hidden').slice(0, 3).show();
            if ($('.lo-profile-cards .lo-profile-card').length == $('.lo-profile-cards .lo-profile-card:visible').length) {
                $('.show-more-los ').hide();
            }
        });
    });

CSS

.lo-profile-cards .lo-profile-card:nth-child(n+7)
    {
        display:none;
    }
jquery
1 Answers

You can use .closest() to get closest outer div from show more and then use .find() to access elements inside that outer div .

Demo Code :

$(function() {
  $('.show-more-los').click(function() {
    //use .closest and then use find to access only div where show more is clicked
    $(this).closest('.lo-profile-cards').find('.lo-profile-card:hidden').slice(0, 3).show();
    if ($(this).closest('.lo-profile-cards').find('.lo-profile-card').length == $(this).closest('.lo-profile-cards').find('.lo-profile-card:visible').length) {
      $(this).hide();
    }
  });
});
.lo-profile-cards .lo-profile-card:nth-child(n+7) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="lo-profile-cards">
  <div class="lo-profile-card">Card 1</div>
  <div class="lo-profile-card">Card 2</div>
  <div class="lo-profile-card">Card 3</div>
  <div class="lo-profile-card">Card 4</div>
  <div class="lo-profile-card">Card 5</div>
  <div class="lo-profile-card">Card 6</div>
  <div class="lo-profile-card">Card 7 (hidden, will be revealed with show more)</div>
  <div class="lo-profile-card">Card 8 (hidden, will be revealed with show more)</div>
  <div class="lo-profile-card">Card 9 (hidden, will be revealed with show more)</div>
  <div class="lo-profile-card">Card 10 (hidden, will be revealed with show more pressed second time)</div>
  <div class="lo-profile-card">Card 11 (hidden, will be revealed with show more pressed second time</div>
  <div class="lo-profile-card">Card 12 (hidden, will be revealed with show more pressed second time</div>
  <a href="#" class="show-more-los">Show More</a>
</div>

<!-- SECOND DIV WITH SAME FUNCTIONALITY -->
<div class="lo-profile-cards">
  <div class="lo-profile-card">Card 1</div>
  <div class="lo-profile-card">Card 2</div>
  <div class="lo-profile-card">Card 3</div>
  <div class="lo-profile-card">Card 4</div>
  <div class="lo-profile-card">Card 5</div>
  <div class="lo-profile-card">Card 6</div>
  <div class="lo-profile-card">Card 7 (hidden, will be revealed with show more)</div>
  <div class="lo-profile-card">Card 8 (hidden, will be revealed with show more)</div>
  <div class="lo-profile-card">Card 9 (hidden, will be revealed with show more)</div>
  <div class="lo-profile-card">Card 10 (hidden, will be revealed with show more pressed second time)</div>
  <div class="lo-profile-card">Card 11 (hidden, will be revealed with show more pressed second time</div>
  <div class="lo-profile-card">Card 12 (hidden, will be revealed with show more pressed second time</div>
  <a href="#" class="show-more-los">Show More</a>
</div>

Alternative is using .parent() instead of .closest() .

Demo Code :

$(function() {
  $('.show-more-los').click(function() {
   //use parent
    $(this).parent().find('.lo-profile-card:hidden').slice(0, 3).show();
    if ($(this).parent().find('.lo-profile-card').length == $(this).parent().find('.lo-profile-card:visible').length) {
      $(this).hide();
    }
  });
});
.lo-profile-cards .lo-profile-card:nth-child(n+7) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="lo-profile-cards">
  <div class="lo-profile-card">Card 1</div>
  <div class="lo-profile-card">Card 2</div>
  <div class="lo-profile-card">Card 3</div>
  <div class="lo-profile-card">Card 4</div>
  <div class="lo-profile-card">Card 5</div>
  <div class="lo-profile-card">Card 6</div>
  <div class="lo-profile-card">Card 7 (hidden, will be revealed with show more)</div>
  <div class="lo-profile-card">Card 8 (hidden, will be revealed with show more)</div>
  <div class="lo-profile-card">Card 9 (hidden, will be revealed with show more)</div>
  <div class="lo-profile-card">Card 10 (hidden, will be revealed with show more pressed second time)</div>
  <div class="lo-profile-card">Card 11 (hidden, will be revealed with show more pressed second time</div>
  <div class="lo-profile-card">Card 12 (hidden, will be revealed with show more pressed second time</div>
  <a href="#" class="show-more-los">Show More</a>
</div>

<!-- SECOND DIV WITH SAME FUNCTIONALITY -->
<div class="lo-profile-cards">
  <div class="lo-profile-card">Card 1</div>
  <div class="lo-profile-card">Card 2</div>
  <div class="lo-profile-card">Card 3</div>
  <div class="lo-profile-card">Card 4</div>
  <div class="lo-profile-card">Card 5</div>
  <div class="lo-profile-card">Card 6</div>
  <div class="lo-profile-card">Card 7 (hidden, will be revealed with show more)</div>
  <div class="lo-profile-card">Card 8 (hidden, will be revealed with show more)</div>
  <div class="lo-profile-card">Card 9 (hidden, will be revealed with show more)</div>
  <div class="lo-profile-card">Card 10 (hidden, will be revealed with show more pressed second time)</div>
  <div class="lo-profile-card">Card 11 (hidden, will be revealed with show more pressed second time</div>
  <div class="lo-profile-card">Card 12 (hidden, will be revealed with show more pressed second time</div>
  <a href="#" class="show-more-los">Show More</a>
</div>

user_106064000
Related