В этом блоге я расскажу и покажу простой пример как можно скрыть и открыть какой либо элемент по клику мыши.

На одной странице разрабатываемого сайта нужно было сделать такой функционал, чтоб при клики по кнопке "Добавить отзыв" открывалась форма отзыва без перезагрузки страницы. И если нужно сделать отмену, то при клике по кнопке "Закрыть" форма так же скрывалась без перезагрузки страницы.

В шаблон страницы я добавил кнопку "Add Review" по которой если кликнуть то будет открываться блок в который можно положить что угодно в моем случае там будет форма.

<div class="container-fluid">
    <button type="button" class="btn btn-info" onclick="openForm()">Add Review</button>
</div>

Сам блок в котором будет ваш скрытый контент и кнопка "Закрыть"

<div class="reviews" style="display: none;">

        <h3>Тут будет контен!</h3>

      <div class="container-fluid">
        <button class="btn btn-danger btn-sm" onclick="closeForm()">close</button>
    </div>
</div>

В кнопке я определил функцию onclick="openForm()" - это говорит о том, что при клике эта функция будет срабатывать.

Блок div в котором будет скрытая информация имеет class="reviews" и стиль display: none; это говорит, что этот блок будет скрытым.

И кнопка котороя в случае отмены будет закрывать блок по клику onclick="closeForm()"

Теперь сам код js

    var openForm = function () {
    $('.reviews').show()
}

    var closeForm = function () {
    $('.reviews').hide()
}

Здесь на openForm() мы вешаем наш класс блока reviews и применяем к ниму функцию .show() - показать.
В closeForm так же вешаем наш блок reviews и применяем функцию .hide() - скрыть.

Дополнено:

Решил сделать, чтоб при клике по кнопке Add Review было не только отображение скрытого контента но и скрывалась сама кнопка Add Review, а при клике по красной кнопке Close, чтоб скрывался контент и появлялась снова кнопка Add Review.

Как это сделать?

Я добавил в кнопку Add Review стиль style="display: block" который поумолчанию ее показывает всегда.

<div class="container-fluid">
    <button type="button" class="btn btn-info" onclick="openForm()" style="display: block">Add Review</button>
</div>

и в js добавил этот класс $('.btn-info').toggleClass("btn-hide").hide() который ее будет скрывать по клику. Так же сделал такой же класс на кнопку Close который будет отображать ее  $('.btn-info').toggleClass("btn-hide").show()

Код jQuery теперь выглядит так.

    let openForm = function () {
    $('.reviews').show()
    $('.btn-info').toggleClass("btn-hide").hide()
}

    let closeForm = function () {
    $('.reviews').hide()
    $('.btn-info').toggleClass("btn-show").show()
}

Результат работы можно посмотреть на видео.
 

Комментарии могут оставлять только зарегистрированые пользователи!