Аккордеон Divi. Как сделать первый элемент свёрнутым по умолчанию

Как сделать первый элемент аккордеона Divi свёрнутым по умолчанию | WESPE.CLUB

Wespe Club

Клуб веб-разработчиков. Наша миссия - сделать вебразработку понятной и доступной широкому кругу людей.

01.04.2021

Случатся так, что при выводе элемента-аккордеон в теме Divi нужно, чтобы  первый элемент был по умолчанию закрыт. Казалось бы мелочь, но дизайн иногда этого требует. В маленьких блоках это нужный функционал. К сожалению, такой элементарной возможности в настройках не предусмотрено, но это не беда. WESPE CLUB расскажет, как это сделать!

-60% на Divi theme

Лицензионная тема Divi в нашем каталоге со скидкой 60%.

Аккордеон Divi

Аккордеон – очень удобный элемент. В теме Divi, как и прочие, его можно найти во время создания страницы или записи при помощи конструктора. Для этого нужно создать новый модуль и выбрать “Аккордеон”

Что мы получим в результате

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

До

01 | WESPE CLUB

После

иногда требуется, чтобы | WESPE.CLUB

Как это сделать

Делается это при помощи jQuery. Если вы не знакомы с jQuery, или даже вообще не знаете что это такое, без паники! Всё просто, следуйте за нами по шагам.

01

Находим место для добавления кода jQuery

Для начала определим, куда вставлять код. В шаблоне Divi это место найти не трудно. Отправляемся по следующему пути Панель администратора WordPress -> Divi -> Настройки темы -> Интеграция (вкладка в верхней части). Далее в левой части открышегося окна ищем название “Добавить код в < head > вашего блога”. Сюда будем вставлять код.

иногда требуется, чтобы | WESPE.CLUB

02

Добавляем код jQuery на страницы сайта

Теперь берём код и вставляем в нужное окошко (см. 1 шаг).  

<script>
jQuery(function($){
    $(‘.et_pb_accordion .et_pb_toggle_open’).addClass(‘et_pb_toggle_close’).removeClass(‘et_pb_toggle_open’);
    $(‘.et_pb_accordion .et_pb_toggle’).click(function() {    
      $this = $(this);
      setTimeout(function(){
      $this.closest(‘.et_pb_accordion’).removeClass(‘et_pb_accordion_toggling’);
},700);
    });
});
</script>

Well done!

Какая-то короткая статья получилась. Неожиданно. Зато работает как надо. Однако, внимательный читатель скажет: “Зачем же нам какой-то код на весь сайт, если нужен он может быть только на одной странице!” И будет прав. Для тех кто дочитал до конца подсказываем более изящный способ размещения кода только на той странице, где у нас размещается Аккордеон.

BONUS

Вставляем код jQuery на одну страницу

Вот тут разработчики заслужили похвалу на все 100%. Добавить код на страницу в Divi builder проще простого. Easy peasy, как мы любим говорить. Добавляем новый блок, который называется, как бы вы думали? “</> Код”, как это ни странно 🙂

Как сделать первый элемент аккордеона Divi свёрнутым по умолчанию | WESPE.CLUB

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

Вам будет интересно…

Невероятно красивое интерактивное оглавление в Divi theme

Невероятно красивое интерактивное оглавление в Divi theme

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

3 комментария

  1. Евгений

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

    Ответить
    • Wespe

      Divi предлагает отличные инструменты. Готовые решения отданы на откуп разработчикам. Большинство приёмов достаточно легко исполнимо даже без особой подготовки, было бы желание. Как в случае с Аккордеоном, например. Хотя, нам тоже кажется, что могли бы такую мелочь вынести в настройки.

      Ответить
  2. Александр

    А как развернуть обратно?

    Ответить

Оставить комментарий

Ваш адрес email не будет опубликован.