Как скрыть блок по кнопке в Elementor

В этой статье я покажу как скрыть любой блок в Elementor по нажатию кнопки. Мы сделаем это без помощи посторонних плагинов, понадобится только небольшой скрипт на JavaScript.

Кошка

Для начала создайте страницу в Elementor и добавьте внизу страницы код:

Как скрыть блок по кнопке в Elementor

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.showme').click(function(){
$('.hiden-block').slideToggle();
$(this).toggleClass('opened');
});
$('.closebutton').click(function(){
$(this).closest('.elementor-section').prev().find('.showme').click();
});
});
});
</script>
<style>
.showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
cursor: pointer;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.opened i , .opened img{
transform: rotate(90deg);
}
</style>

Добавьте кнопку и присвойте этому элементу CSS класс «showme»

Как скрыть блок по кнопке в Elementor

Оставте поле «ссылка» пустым, иначе страница будет перезагружаться, а это нам не нужно

Как скрыть блок по кнопке в Elementor

Элементу который необходимо скрыть нужно задать CSS класс «hiden-block«

Как скрыть блок по кнопке в Elementor

Все готово, теперь при нажатии кнопки, блок с классом hiden-block будет вести себя как гармошка.
Если вам нужно что бы элемент по умолчанию был скрыт, по нажатию кнопки раскрывался, то нужно в настройке блока адаптивности поставить «Скрыть на компьютерах»

Как скрыть блок по кнопке в Elementor

admintyutyukov
Оцените автора
Добавить комментарий

  1. Николай

    У меня почему-то не работает. Кнопка без ссылки не активна. Просто как текст отображается. А у вас она работает как кнопка. Сделал все как, написал автор, но увы.

    Ответить
    1. admintyutyukov автор

      Добрый день. Должно работать, видимо что-то пропустили. Вы CSS класс для кнопки и блока не забыли указать?

      Ответить