Как показать или скрыть раздел на Нажмите в Элементоре

Ключевые выводы

• У Elementor нет специального управления для отображения или скрытия раздела при щелчке мыши, поэтому тремя методами работы являются виджет Accordion, виджет переключения контента и кнопка с коротким сценарием.
• Виджет Elementor Accordion скрывает любые виджеты внутри элемента до тех пор, пока не будет щелчкан его заголовок, а значение "Состояние по умолчанию", установленное на "Все свернуто", сохраняет элемент закрытым при загрузке страницы.
• Виджет "Переключить содержимое" Master Addons работает как переключатель "показать и скрыть", когда один из двух его вариантов остается пустым, а другой удерживает раздел.
• Кнопка может отображать или скрывать любой контейнер Elementor примерно с десятью строками JavaScript в виджете HTML, используя один класс CSS на кнопке и одну на контейнере.
• Условия отображения Elementor и настройки адаптивной защиты не реагируют на щелчки, поскольку они решают, что отображается по правилам или по устройствам, прежде чем посетитель что-либо сделает.

Чтобы показать или скрыть раздел при нажатии в Elementor, поместите раздел внутрь чего-то, что открывается при нажатии Виджет Accordion делает это без дополнительного плагина Переключатель контента дает вам переключатель Показать и Скрыть Кнопка с несколькими строками сценария может раскрыть любой контейнер на странице Элементор не имеет ни одного “ на click” настройки, поэтому один из этих трех - маршрут.

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

Какой метод подходит вашей странице

Все три метода скрывают раздел до щелчка. Они различаются тем, что нажимает посетитель и сколько настроек ему нужно.

Метод 1: Виджет Accordion

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

1. Отредактируйте страницу с помощью Elementor и перетащите ее Аккордеон виджет туда, где должен быть скрытый раздел.
2. Удалить ненужные вам элементы Для одного скрытого раздела сохраните один элемент.
3. Введите заголовок, который посетители нажмут, например "Показать детали доставки".
4. Нажмите внутри элемента и добавьте свой контент: текст, изображения, форму или макет всего контейнера.
5. Открытый Взаимодействия и набор Состояние по умолчанию чтобы Все рухнуло.

Предел этого метода - это look.The триггер всегда является строкой заголовка непосредственно над содержимым. если вам нужна стилизованная кнопка, или триггер где-то еще на странице, используйте метод 3. для большего количества стилей заголовка, the Расширенный виджет Accordion является опцией.

Способ 2: Переключение контента с пустой опцией

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

Эти шаги используют Переключить контент от Master Addons Pro. мы протестировали пустую опцию на Elementor 4.3, и она не оставляет пробелов или заполнителей.

1. Драг Переключить контент на страницу.
2. В Элементы перечислите, пометьте первый элемент. Скрыть данные и удалить образец текста, чтобы его содержимое было пустым.
3. Пометьте второй элемент Показать детали.Напишите содержимое в редакторе, или установите Тип чтобы создать шаблон и выбрать сохраненный шаблон для полного макета.
4. Открытый Переключить настройки и уходить Активный индекс на 1 страница загружается со скрытым разделом.
5. Набор Должность до, если переключатель должен располагаться над секцией, или после, чтобы поставить его ниже.

Переключатель делает состояние очевидным, что соответствует необязательным деталям, таким как факты о питании, технические характеристики или термины. Чтобы перевернуть его в другую сторону, сначала виднея раздел, установите активный индекс на 2.

Переключение между двумя секциями? выше Переключить страницу виджета контента имеет коммутаторы выставления счетов, таблицы спецификаций и еще восемь живых демонстраций.

Метод 3: Кнопка и короткий сценарий

Используйте скрипт, когда триггер должен быть обычной кнопкой, или когда кнопка и раздел находятся в разных местах. вы добавляете один CSS-класс к кнопке, один к разделу и вставляете небольшой фрагмент в HTML-виджет.

1. Добавить а Кнопка виджет. В Расширенные > CSS-классы, тип show-hide-button. Оставьте поле ссылки кнопки пустым.
2. Выберите контейнер, который хотите скрыть. в Расширенные > CSS-классы, тип show-hide-target.
3. Перетащить HTML виджет в любом месте страницы и вставьте код ниже.
4. Обновите страницу и протестируйте ее на лицевой стороне.

<style>
.show-hide-target { display: none; }
.show-hide-target.is-open { display: flex; }
.elementor-editor-active .show-hide-target { display: flex; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".show-hide-button a, .show-hide-button button").forEach(function (button) {
    button.addEventListener("click", function (event) {
      event.preventDefault();
      document.querySelectorAll(".show-hide-target").forEach(function (target) {
        target.classList.toggle("is-open");
      });
    });
  });
});
</script>

Первое правило стиля скрывает контейнер. второй показывает его, как только сценарий добавляет is-open класс. третий сохраняет контейнер видимым внутри редактора Elementor, поэтому вы все еще можете редактировать его. Каждый нажатие на кнопку добавляет или удаляет класс.

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

Если раздел должен открыться над страницей, используйте всплывающее окно См как добавить всплывающее окно в Elementor.

Что не работает: Условия отображения и адаптивные настройки

Две функции Elementor звучат так, как будто они должны это делать, а не делают этого. Оба скрывают контент, но ни один из них не реагирует на щелчок.

• Адаптивные настройки. Advanced > Responsive имеет Hide On Desktop, Hide On Tablet и Hide On Mobile.Thes скрывают элемент по размеру экрана, все время.
• Условия отображения. Условия показа Элементора показывать или скрывать элемент по правилам, например статус входа, роль пользователя, дата или браузер Решение принимается при загрузке страницы.

Они являются правильными инструментами, когда сайт должен решить, что видит посетитель Мы покрываем их в Условия отображения элементараи Расширение условий отображения страница перечисляет все поддерживаемые ею правила Когда посетитель должен принять решение, используйте один из трех методов клика выше.

Часто задаваемые вопросы

Заключительные мысли

Есть три надежных способа показать или скрыть раздел при нажатии в Elementor. Используйте виджет Accordion, когда строка заголовка в порядке, контент переключается с одним пустым параметром, когда вам нужен видимый переключатель, и кнопку с коротким сценарием, когда триггер должен сидеть где-то еще.

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

Связанное чтение

• Условия отображения Elementor: показывать и скрывать контент по правилам
• Как добавить всплывающее окно в Elementor
• Эффекты прокрутки элементара
• Как создать кнопку переключения в Elementor (3 способа)
• Переключение Elementor против аккордеона против вкладок и переключателя контента