Jquery как скрыть и открыть элемент по клику.
В этом блоге я расскажу и покажу простой пример как можно скрыть и открыть какой либо элемент по клику мыши.
На одной странице разрабатываемого сайта нужно было сделать такой функционал, чтоб при клики по кнопке "Добавить отзыв" открывалась форма отзыва без перезагрузки страницы. И если нужно сделать отмену, то при клике по кнопке "Закрыть" форма так же скрывалась без перезагрузки страницы.
В шаблон страницы я добавил кнопку "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()
}
Результат работы можно посмотреть на видео.
Ваши комментарии
Комментарии могут оставлять только зарегистрированые пользователи!