.container { display: flex; flex-wrap: wrap; } /* Колонка з кнопками */ .column-buttons { flex: 1; min-width: 300px; padding: 20px; background-color: #f1f1f1; } /* Колонка з фото */ .column-images { flex: 1; min-width: 300px; padding: 20px; text-align: center; background-color: #fff; } /* Стили кнопок */ .accordion button { display: block; width: 100%; padding: 10px; text-align: left; border: none; background-color: #ddd; cursor: pointer; margin-bottom: 5px; } .accordion button.active { background-color: #bbb; color: rgb(204, 28, 28); } /* Текст під кнопкою */ .accordion-content { display: none; padding: 10px; background-color: #f9f9f9; /* border: 1px solid #ddd; */ position: relative; } .accordion-content.active { display: block; } /* Вертикальна лінія-індикатор */ .indicator { position: absolute; left: 0; top: 0; width: 2px; background-color: #007bff; height: 0; animation: slide-down 2s linear infinite; } @keyframes slide-down { from { height: 0; } to { height: 100%; } } /* Фото */ .images div { display: none; } .images div.active { display: block; } .images img { max-width: 100%; height: auto; } document.addEventListener("DOMContentLoaded", function () { const buttons = document.querySelectorAll(".accordion button"); const images = document.querySelectorAll(".images div"); const contents = document.querySelectorAll(".accordion-content"); let currentIndex = 0; // Функція для активації вкладки function activateTab(index) { // Ховаємо всі зображення, тексти та знімаємо активний стан із кнопок images.forEach(image => image.classList.remove("active")); contents.forEach(content => content.classList.remove("active")); buttons.forEach(button => button.classList.remove("active")); // Відображаємо потрібне зображення, текст і активуємо кнопку images[index].classList.add("active"); contents[index].classList.add("active"); buttons[index].classList.add("active"); } // Ініціалізація: показуємо перше фото та текст за замовчуванням activateTab(currentIndex); // Автоматичне переключення setInterval(() => { currentIndex = (currentIndex + 1) % buttons.length; activateTab(currentIndex); }, 2000); // Обробка кліків buttons.forEach((button, index) => { button.addEventListener("click", () => { currentIndex = index; // Оновлюємо поточний індекс activateTab(index); }); }); });