Jquery Show more div and show less div

Question

I need help for show more and show less for sum div.

I have created this DEMO from codepen.io

In this DEMO you can see 8 div red frame. I want to show if total div is greater than 4 then show more link will come and when i click show more link than i can see all div in the same page. Anyone can help me on this topic ?

<div class="container">
  <div class="post_wrap">
    <div class="pst">
      Post 1
    </div>
     <div class="pst">
      Post 2
    </div>
     <div class="pst">
      Post 3
    </div>
     <div class="pst">
      Post 4
    </div>
     <div class="pst">
      Post 5
    </div>
     <div class="pst">
      Post 6
    </div>
     <div class="pst">
      Post 7
    </div>
     <div class="pst">
      Post 8
    </div>
    <div class="test"><a href="">Show More</a></div> 
  </div>
  <div class="post_wrap">
    <div class="pst">
      Post 1
    </div>
     <div class="pst">
      Post 2
    </div>
     <div class="pst">
      Post 3
    </div>
     <div class="pst">
      Post 4
    </div>
     <div class="pst">
      Post 5
    </div>
     <div class="pst">
      Post 6
    </div>
     <div class="pst">
      Post 7
    </div>
     <div class="pst">
      Post 8
    </div>
    <div class="test"><a href="">Show More</a></div> 
  </div>
</div>

Answer 1

CSS

div.test { display:none }

jQuery

1) First, you select every element with class '.post_wrap'

$('.post_wrap')

2) Then, with each() function jquery iterates over every .post_wrap element found in DOM and counts the child divs with class of .pst

$(this).find('div.pst').length;

in more detail

The $(this) refers to the element that each() function was applied to, in this case, $('post_wrap') The find() function searches into the applied element and finds what it was told to find, in this case, finds every div.pst element And, length counts the found elements

and stores the result in a variable named 'divNum'

Now, id divNum is greater than 4

if (divNum > 4)

show the div.test element

$('div.test').show()

$('.post_wrap').each(function() {
    var divNum = $(this).find('div.pst').length;
    if (divNum > 4) {
        $('div.test').show();
    }
}) 

Then if dv.test is visible:

$('div.test').click(function() {
    // show more divs
})

EDIT -> your code pen

Check the CodePen

jQuery

$ShowHideMore = $('.post_wrap');
$ShowHideMore.each(function() {
var $times = $(this).children('.pst');
if ($times.length > 5) {
    $ShowHideMore.children(':nth-of-type(n+5)').addClass('moreShown').hide();
    $(this).find('span.message').addClass('more-times').html('+ Show more');
}
});

$(document).on('click', '.post_wrap > span', function() {
var that = $(this);
var thisParent = that.closest('.post_wrap');
if (that.hasClass('more-times')) {
thisParent.find('.moreShown').show();
that.toggleClass('more-times', 'less-times').html('- Show less');
} else {
thisParent.find('.moreShown').hide();
that.toggleClass('more-times', 'less-times').html('- Show more');
}  
});