Інтерактивний аккордеон з динамічною зміною зображень в Elementor — це чудовий спосіб зробити ваш сайт більш привабливим і зручним для користувачів. У цій статті ми розглянемо, як налаштувати аккордеон, щоб при відкритті кожної вкладки відображалося відповідне зображення, використовуючи готовий JavaScript і CSS код.

Крок 1: Налаштування аккордеона в Elementor

Додавання віджета аккордеона:

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

Крок 2: Додавання зображень

Створення контейнера для зображень:

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

Налаштування стилів для зображень:

• Використовуйте наступний 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:

• У Elementor додайте віджет «HTML» у будь-яку частину сторінки.
• Вставте код вище всередину тегу <script> у віджеті HTML:<script> // Вставте JavaScript-код тут </script>
• Переконайтеся, що jQuery підключений (воно включене за замовчуванням у WordPress і Elementor).

Крок 4: Тестування та оптимізація

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

• Збережіть сторінку та відкрийте її у режимі попереднього перегляду.
• Клацніть по заголовках аккордеона, щоб переконатися, що зображення змінюються відповідно до активної вкладки.
• Якщо одна з вкладок відкрита за замовчуванням, відповідне зображення має відображатися при завантаженні сторінки.

Додаткові покращення:

• Для плавної зміни зображень додайте анімацію в 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 кодом, ви можете створити інтерактивний аккордеон, який змінює зображення при переключенні вкладок. Це рішення робить ваш сайт більш динамічним і покращує користувацький досвід. Спробуйте реалізувати цей аккордеон на своєму сайті та експериментуйте з анімаціями для ще більшого ефекту.