why does my jquery function fadeOut work but slice doesn't work?

Question

I need to make a button that views three consequent posts

when I click "view all" the three "div"s should show up

I need to make the three 'div's show up if I click the view all button so I am using jquery here

 $('.posts .repeat-grid').slice(0, 3).show(); $('#view-all').on('click', function() { $('.posts .repeat-grid:hidden').slice(0, 1).slideDown(); if ($('.posts .repeat-grid:hidden').length === 0) { $('#view-all').fadeOut(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="posts"> <div class="repeat-grid">1</div> <div class="repeat-grid">2</div> <div class="repeat-grid">3</div> </div> <div id="view-all">View All</div>

any idea why it is not working?

Answer 1

You Can Try this if that's what you mean

 $('#view-all').on('click', function() { $('.posts').slideToggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="posts"> <div class="repeat-grid">1</div> <div class="repeat-grid">2</div> <div class="repeat-grid">3</div> </div> <div id="view-all">View All</div>