Как дописать скрипт на скрытие элементов?

Question

[ssawyer]

Есть скрипт

$(document).ready(function(){
  $('.more-functions').click(function(){
      var scrollToProduct = $('.functions__items:hidden');
      $('.functions__item:hidden:lt(5)').slideToggle('slow');



      if (scrollToProduct.length === 0) $('.show_content').addClass('active') ;


      $('html, body').animate({
          scrollTop: scrollToProduct.offset().top
      }, 1000);
  });
});

<ul class="functions__items">


                <?php

                    // проверяем есть ли в повторителе данные
                    if( have_rows('functions_block') ):

                        // перебираем данные
                        $i = 1; while ( have_rows('functions_block') ) : the_row();?>

                    <!-- item -->
                    <li class="functions__item" <?php if ($i >= 6):?>hidden<?php endif; ?>>
                        <div class="functions__item_wrap">
                        <div class="functions__item-number">
                            <p>/ <?php if ($i < 10):?>0<?php endif; ?><?php echo $i;?></p>
                        </div>
                        <div class="functions__item-content">
                            <p class="functions__item-title"><?php the_sub_field('functions_block-title');?></p>
                            <a href="#modal-block" class="functions__item-link">Подробнее <i class="icon icon-arrow_mini-up"></i></a>
                        </div>
                    </div>
                    </li>
                    <!-- item -->

                    <?php
                   $i++; endwhile;
                        else :
                          // вложенных полей не найдено
                    endif;?>

                </ul>

При нажатии на кнопку показать еще, показывается следующие 5 блоков. Но что и как дописать, чтобы если functions__item (блоки) закончились, то клик по кнопке сворачивал до 5 блоков обратно. Сейчас только разворачивает. slideToggle не помогает

Answer 1

[Sozdavan]

Один из способов добиться такого поведения — добавить проверку количества видимых элементов перед вызовом функции slideToggle. Если количество видимых элементов равно общему количеству элементов, вы можете использовать функцию slideToggle с другим аргументом, чтобы скрыть элементы вместо их отображения. Вот пример того, как вы можете это сделать:

$('.more-functions').click(function(){
  var hiddenItems = $('.functions__item:hidden');
  if(hiddenItems.length > 0) {
    hiddenItems.slice(0,5).slideToggle('slow');
  } else {
    $('.functions__item:visible').slice(-5).slideToggle('slow');
  }
  //... rest of the code
});

Это проверит, есть ли какие-либо скрытые элементы, и если да, то отобразятся следующие 5, в противном случае будут скрыты последние 5 видимых элементов