1 октября, 2021

Показать секцию по клику по кнопке или ссылке

Показать блок по клику

Привет, друзья! Сегодня мы разберем, как показать секцию по клику по кнопке или ссылке в Elementor.

Покажем решение как стандартными средствами Elementor, так и нестандартными, путем использования JavaScript-библиотеки JQuery.

Показываем секцию при нажатии на кнопку, используя JQuery

Итак, для начала добавим в редактор Elementor две секции: одну секцию с кнопкой, по клику на которой будет раскрываться блок, вторую секцию с любым содержимым. Для наглядности закрасим фон второй секции красным цветом.

При помощи JQuery мы будем находить нужный элемент (в нашем случае кнопку) на странице и обрабатывать клик по этой кнопке, показывая или скрывая секцию ниже. Чтобы нужный блок появлялся по клику на определенную кнопку, добавим и кнопке и секции уникальные имена, id. Что такое ID и классы можете прочитать в нашей статье «СЕКЦИЯ. ВКЛАДКА РАСШИРЕННЫЕ.»

Кнопке назначим id = btn, секции id = hide, опять же, для примера, можете придумать свои имена, лишь бы было понятно вам.

pokazat sekcziyu po kliku po knopke ili ssylke 001
pokazat sekcziyu po kliku po knopke ili ssylke 002

Изначально, вторая секции должна быть скрыта, для нее в разделе «Расширенные => Пользовательские css» обязательно пропишите проведенные ниже код, иначе при загрузке страницы секция, которую нужно развернуть будет в открытом виде.

/*Данное css-свойство скроет секцию*/

selector {
    display: none;
}

Затем в конец страницы в редакторе добавим html-виджет Elementor. В него мы будем вставлять наш js-скрипт. Пропишем в нем следующий код:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

$('document').ready(function(){
        $('#btn').click(function(){
            $('#hide').slideToggle('slow');
      return false;
    });
 });

</script>

Прокомментируем этот код.

Первой строкой подключим JQuery к странице.

Далее, для id=btn (кнопка) по срабатыванию метода .click, для элемента с id=hide (отображаемая секция), сработает метод .slideToggle со значением (‘slow’).

Результат работы скрипта смотрите ниже:

pokazat sekcziyu po kliku po knopke
Показать секцию по клику по кнопке или ссылке Elementor

Если нужно, чтобы изначально блок был открыт, а по клику на кнопке он скрывался, тогда просто уберите из css-свойств второй секции код: selector { display: none; }

Показываем секцию по клику на ссылке, используя JQuery

Итак, ссылка, по сути, это кнопка, только без оформления. JQuery без разницы, по клику на какой элемент срабатывает метод.

Создадим секцию с заголовком, который мы сделаем ссылкой, и секцию, которую будем скрывать по клику по заголовку-ссылке.

Как и в примере с кнопкой выше, присвоим ссылке и блоку, который она будет открывать, уникальные имена:

  • для ссылки id = open-section-link
  • для секции id = hide-section

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

pokazat sekcziyu po kliku po ssylke 001

Разворачиваемой секции присвоим свойство selector { display: none; } , чтобы она при загрузке страницы была скрыта.

Добавим ниже немного исправленный код из примера с кнопкой:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>


$('document').ready(function(){
        $('#open-section-link').click(function(){
            $('#hide-section').slideToggle('slow');
         return false;
    });
 });

</script>

Вот и все. Пример работы скрипта ниже:

pokazat sekcziyu po kliku po knopke ili ssylke

0

Интересные статьи

Секция. Вкладка Расширенные.

Секция. Вкладка Расширенные. Данный блок объединяет очень важные расширенные настройки отображения секции: расширенные; эффекты движения; адаптивность; атрибуты; пользовательские css Расширенные. Данный раздел

Читать полностью »
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Регистрация

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.