Как сделать чтобы при нажатии на кнопку появлялся блок
Как сделать чтобы при нажатии на кнопку появлялся блок
Как сделать чтобы при нажатии на кнопку появлялся блок
Привет, друзья! Сегодня мы разберем, как показать секцию по клику по кнопке или ссылке в Elementor.
Покажем решение как стандартными средствами Elementor, так и нестандартными, путем использования JavaScript-библиотеки JQuery.
Показываем секцию при нажатии на кнопку, используя JQuery
Итак, для начала добавим в редактор Elementor две секции: одну секцию с кнопкой, по клику на которой будет раскрываться блок, вторую секцию с любым содержимым. Для наглядности закрасим фон второй секции красным цветом.
При помощи JQuery мы будем находить нужный элемент (в нашем случае кнопку) на странице и обрабатывать клик по этой кнопке, показывая или скрывая секцию ниже. Чтобы нужный блок появлялся по клику на определенную кнопку, добавим и кнопке и секции уникальные имена, id. Что такое ID и классы можете прочитать в нашей статье «СЕКЦИЯ. ВКЛАДКА РАСШИРЕННЫЕ.»
Кнопке назначим секции опять же, для примера, можете придумать свои имена, лишь бы было понятно вам.
Изначально, вторая секции должна быть скрыта, для нее в разделе «Расширенные => Пользовательские css» обязательно пропишите проведенные ниже код, иначе при загрузке страницы секция, которую нужно развернуть будет в открытом виде.
Затем в конец страницы в редакторе добавим html-виджет Elementor. В него мы будем вставлять наш js-скрипт. Пропишем в нем следующий код:
Прокомментируем этот код.
Первой строкой подключим JQuery к странице.
Результат работы скрипта смотрите ниже:
Показать секцию по клику по кнопке или ссылке Elementor
Если нужно, чтобы изначально блок был открыт, а по клику на кнопке он скрывался, тогда просто уберите из css-свойств второй секции код: selector
Показываем секцию по клику на ссылке, используя JQuery
Итак, ссылка, по сути, это кнопка, только без оформления. JQuery без разницы, по клику на какой элемент срабатывает метод.
Создадим секцию с заголовком, который мы сделаем ссылкой, и секцию, которую будем скрывать по клику по заголовку-ссылке.
Как и в примере с кнопкой выше, присвоим ссылке и блоку, который она будет открывать, уникальные имена:
Далее, чтобы при наведении на заголовок, курсор вел себя как при наведении на ссылку, присвоим ссылке пустой якорь, который никуда не ведет.
Добавим ниже немного исправленный код из примера с кнопкой:
Вот и все. Пример работы скрипта ниже:
На этом все! Ставим лайки, если статья помогла вам)