Интерактивный аккордеон с динамической сменой изображений в Elementor — это отличный способ сделать ваш сайт более привлекательным и удобным для пользователей. В этой статье мы разберем, как настроить аккордеон, чтобы при открытии каждой вкладки отображалось соответствующее изображение, используя готовый JavaScript и CSS код.

Шаг 1: Настройка аккордеона в Elementor

1. Добавление виджета аккордеона:

• В редакторе Elementor перетащите виджет «Аккордеон» на страницу.
• Настройте содержимое аккордеона, добавив нужное количество вкладок (например, 4).
• Для каждой вкладки задайте заголовок и содержимое, например:
  • Вкладка 1: «Описание 1» → Текст или контент.
  • Вкладка 2: «Описание 2» → Текст или контент.
  • Вкладка 3: «Описание 3» → Текст или контент.
  • Вкладка 4: «Описание 4» → Текст или контент.

Шаг 2: Добавление изображений

1. Создание контейнера для изображений:

• Добавьте секцию или контейнер рядом с аккордеоном, где будут отображаться изображения.
• Внутри контейнера разместите 4 виджета «Изображение» для каждого изображения.
• Присвойте каждому изображению уникальный CSS-класс:
  • Первое изображение: img-1
  • Второе изображение: img-2
  • Третье изображение: img-3
  • Четвертое изображение: img-4

1. Настройка стилей для изображений:

• Используйте следующий CSS-код, чтобы изначально скрыть все изображения и отображать только активное:
  css .img-1, .img-2, .img-3, .img-4 { display: none; } .img-1.active, .img-2.active, .img-3.active, .img-4.active { display: block; }
• В Elementor добавьте этот CSS в раздел «Дополнительно» → «Пользовательский CSS» для секции с изображениями или в глобальные стили сайта.

Шаг 3: Подключение JavaScript для интерактивности

Для динамической смены изображений при переключении вкладок аккордеона используйте следующий JavaScript-код, который отслеживает клики по заголовкам вкладок и активирует соответствующее изображение:

jQuery(document).ready(function($) {
  const imageMap = {
    1: '.img-1',
    2: '.img-2',
    3: '.img-3',
    4: '.img-4'
  };

  function showImage(index) {
    $('.img-1, .img-2, .img-3, .img-4').removeClass('active');
    if(imageMap[index]) {
      $(imageMap[index]).addClass('active');
    }
  }

  const openItem = $('.e-n-accordion-item[open]');
  if(openItem.length) {
    const index = openItem.find('summary').data('accordion-index');
    showImage(index);
  }

  $('.e-n-accordion-item summary').on('click', function() {
    const index = $(this).data('accordion-index');

    setTimeout(() => {
      if($(this).parent().attr('open') !== undefined) {
        showImage(index);
      }
    }, 50);
  });
});

Как добавить JavaScript:

1. В Elementor добавьте виджет «HTML» в любую часть страницы.
2. Вставьте код выше в тег <script> внутри виджета HTML:

   <script>
   // Вставьте JavaScript-код здесь
   </script>

3. Убедитесь, что jQuery подключен (он включен по умолчанию в WordPress и Elementor).

Шаг 4: Тестирование и оптимизация

1. Проверка функциональности:

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

1. Дополнительные улучшения:

• Для плавной смены изображений добавьте анимацию в CSS:
  css .img-1, .img-2, .img-3, .img-4 { display: none; opacity: 0; transition: opacity 0.3s ease-in-out; } .img-1.active, .img-2.active, .img-3.active, .img-4.active { display: block; opacity: 1; }
• Это обеспечит плавное появление изображений при переключении.

Полезные советы

• Оптимизация изображений: Используйте изображения в формате WebP или сжатые JPEG для ускорения загрузки страницы.
• Адаптивный дизайн: Проверьте отображение аккордеона и изображений на мобильных устройствах. В Elementor настройте размеры изображений для разных разрешений экрана.

Заключение

С помощью виджета аккордеона в Elementor, предоставленного JavaScript и CSS кода вы можете создать интерактивный аккордеон, который меняет изображения при переключении вкладок. Это решение делает ваш сайт более динамичным и улучшает пользовательский опыт. Попробуйте внедрить этот аккордеон на своём сайте и экспериментируйте с анимациями для ещё большего эффекта.