В этой статье я покажу как скрыть любой блок в Elementor по нажатию кнопки. Мы сделаем это без помощи посторонних плагинов, понадобится только небольшой скрипт на JavaScript.
Для начала создайте страницу в 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»
Оставте поле «ссылка» пустым, иначе страница будет перезагружаться, а это нам не нужно
Элементу который необходимо скрыть нужно задать CSS класс «hiden-block«
Все готово, теперь при нажатии кнопки, блок с классом hiden-block будет вести себя как гармошка.
Если вам нужно что бы элемент по умолчанию был скрыт, по нажатию кнопки раскрывался, то нужно в настройке блока адаптивности поставить «Скрыть на компьютерах»
