Как сделать появление блока при нажатии на кнопку в Elementor

Как сделать появление блока при нажатии на кнопку в Elementor

По умолчанию в Elementor нет функционала позволяющего скрывать блоки и показывать их, нажатием на кнопку. В статье расскажу простой способ как сделать, что бы при нажатии на кнопку появлялись скрытые блоки на странице. Сделаем все это без установки дополнительных плагинов на чистом Elementor.

Пример

Возмещении вреда здоровью при ДТП

Случаи, нанесения тяжкого вреда по неосторожности – повод для судебного разбирательства, в котором пострадавшие могут требовать с виновника всех компенсационных выплат.

от 5000 р.
Подбор автомобиля с пробегом

Без экспертной поддержки подобрать хорошее авто будет сложно, так как за объявлением в сети могут стоять мошенники или на деле окажется, что авто в плачевном состоянии, требует дорогостоящего ремонта.

от 4000 р.
Оценка стоимости автомобиля

Специалисты компании проведут независимое оценивание в сжатые сроки, учтут техническое состояние техники и сопутствующие факторы.

от 5000 р.
Экспертиза годных остатков

Сделаем необходимые проверки при помощи спец. оборудования, составим экспертное заключение и подадим акт о расчете стоимости на руки владельцу.

от 2000 р.

Назначаем нужные классы

Первым делом назначаем нужные классы для блока, который должен быть скрыт и для элемента, который будет являться тригером, чтобы блок появился.

В моем примере для нижней секции, которая содержит в себе 2 колонки с услугами, я назначил класс: «showclick«. Для этого в расширенных настройках секции в поле Css классы пишем «showclick» без точки.

Таким же образом для кнопки «Показать еще услуги» назначаем класс «clicktoshow«.
clicktoshow

Названия классов можно задавать любые. Главное правильно вставить их в код, который будет ниже.

Вставляем html код

Добавляем виджет «HTML-код» и вставляем туда вот это:

<script>
document.addEventListener(‘DOMContentLoaded’, function() {
jQuery(function($){
$(‘.clicktoshow’).each(function(i){
$(this).click(function(){ $(‘.showclick’).eq(i).show();
$(‘.clicktoshow’).eq(i).hide();
}); });
}); });
</script>

<style>
.clicktoshow{cursor: pointer;}
.showclick{display: none;}
</style>

Вставлять можно в любое место на странице, но я рекомендую поближе к блоку, который нужно скрыть,для того, чтобы было удобнее редактировать.

Имейте ввиду, что после вставки кода, скрываемый блок пропадет даже в редакторе. Для того, чтобы он вновь появился в коде свойство «display: none» замените на «display: block».

Понравилась статья? Поделиться с друзьями:
It-Religiya
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.