В этой статье я покажу как скрыть любой блок в 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 будет вести себя как гармошка.
Если вам нужно что бы элемент по умолчанию был скрыт, по нажатию кнопки раскрывался, то нужно в настройке блока адаптивности поставить «Скрыть на компьютерах»
У меня почему-то не работает. Кнопка без ссылки не активна. Просто как текст отображается. А у вас она работает как кнопка. Сделал все как, написал автор, но увы.
Добрый день. Должно работать, видимо что-то пропустили. Вы CSS класс для кнопки и блока не забыли указать?
Здравствуйте! Аналогичная ситуация
Нужно в коде убрать все тогда все заработает. Скорее всего когда копировали код для статьи этот моменты упустили.
Не прописался код в комментариях. Нужно убрать
Спасибо. Плагин который код вставляет, свои теги прописал из=за этого не работало
Исправил код, сейчас должно работать
Здравствуйте, аналогичная проблема. Кнопка без ссылки не активка. Классы CSS для кнопки и блока указаны
Здравствуйте. Исправил код, сейчас должно работать
Тоже не работает печально
Здравствуйте. Исправил, сейчас должно работать
Добрый день!
К сожалению, код не работает((
Делаю все по инструкции — задаю классы, кнопка без ссылки не активна.
Ничего не происходит.
вот так сработало, сначало тоже не работало, поправил
document.addEventListener(‘DOMContentLoaded’, function() {
jQuery(function(jQuery){
jQuery(‘.showme’).click(function(){
jQuery(‘.hiden-block’).slideToggle();
jQuery(this).toggleClass(‘opened’);
});
jQuery(‘.closebutton’).click(function(){
jQuery(this).closest(‘.elementor-section’).prev().find(‘.showme’).click();
});
});
});
Автор. Твои кавычки ломают всю логику сайта. Вот это — ’ в коде не определяется. Понадобилось самому везде прописать нормальные — ‘.