почему моя jquery функция fadeOut работает, а слайс не работает?

Question

Мне нужно сделать кнопку, которая просматривает три последовательных сообщения

, когда я нажимаю «просмотреть все», три «div» должны появиться

Мне нужно сделать три «div» появится, если я нажму кнопку просмотра всех, поэтому я использую jquery здесь

$('.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>

есть идеи, почему это не работает?

Answer 1

Вы можете попробовать это, если это то, что вы имеете в виду

$('#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>