ОРГИНАЛ СТАТЬИ НА САЙТЕ
Случатся так, что при выводе элемента-аккордеон в теме Divi нужно, чтобы первый элемент был по умолчанию закрыт. Казалось бы мелочь, но дизайн иногда этого требует. В маленьких блоках это нужный функционал. К сожалению, такой элементарной возможности в настройках не предусмотрено, но это не беда. WESPE CLUB расскажет, как это сделать!
Divi в нашем каталоге
Лицензионная тема Divi в нашем каталоге ресурсов.
Аккордеон Divi
Аккордеон — очень удобный элемент. В теме Divi, как и прочие, его можно найти во время создания страницы или записи при помощи конструктора. Для этого нужно создать новый модуль и выбрать «Аккордеон»
Что мы получим в результате
Без доработок при загрузке страницы мы видим аккордеон с раскрытым первым элементом. После доработки при загрузке страницы, первый элемент будет закрыт.
До
После
Как это сделать
Делается это при помощи jQuery. Если вы не знакомы с jQuery, или даже вообще не знаете что это такое, без паники! Всё просто, следуйте за нами по шагам.
Находим место для добавления кода jQuery
Для начала определим, куда вставлять код. В шаблоне Divi это место найти не трудно. Отправляемся по следующему пути Панель администратора WordPress -> Divi -> Настройки темы -> Интеграция (вкладка в верхней части). Далее в левой части открышегося окна ищем название «Добавить код в < head > вашего блога». Сюда будем вставлять код.
Добавляем код 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, как мы любим говорить. Добавляем новый блок, который называется, как бы вы думали? «</> Код», как это ни странно
Вставляем наш код в единственно возможное окно и сохраняем. Теперь код будет загружаться только на нужной странице. Это хорошо по двум причинам. Во-первых, нам может понадобиться иметь на разных страницах разные варианты аккордеона. Во-вторых, и это на наш взгляд важнее всего, в пору борьбы за скорость загрузки сайта, не самый верный вариант добавлять лишний код на страницы всего сайта.