Раскрыть, свернуть блок при нажатии на однукнопку

Question

Всем привет. Есть кнопка

 <a class="review-open">Оставить отзыв</a>

При нажатии на нее раскрывается блок

$( ".review-open" ).click(function() {

          $( ".review" ).slideDown( "slow", function() {
            // Animation complete.
          });
        });

Как сделать так что бы при нажатии на нее же, он закрывался?

Answer 1

Как вариант:

let reviewOpen = false; // Переменная, которая отвечает за статус открытия/закрытия блока с отзывом
$(".review-open").click(function() {
  if (!reviewOpen) { //если блок закрыт
    $(".review").slideDown("slow", function() { //открываем его
      // Animation complete.
      reviewOpen = true; //и меняем статус на открытый
    });
  } else { //а если блок открыт
    $(".review").slideUp("slow", function() { //закрываем его
      // Animation complete.
      reviewOpen = false; //и, соответственно, меняем статус на закрытый
    });
  }
});

.review {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="review-open">Оставить отзыв</a>
<div class="review">Пытаемся оставить отзыв здесь</div>

Answer 2

В JQuery есть метод slideToggle, который позволяет сделать то, что Вам нужно

$(".review-open" ).click(function() {
    $( ".review" ).slideToggle( "slow", function() {
       // Animation complete.
    });
});

БЛОГ НА HUSL

Раскрыть, свернуть блок при нажатии на однукнопку

Ответы (2 шт):