Если вам нужно, чтобы все элементы аккордеона открывались по одному, а не только первый элемент, вам потребуется внести некоторые изменения в код. Вот несколько подходов, которые вы можете использовать:
1. Использование JavaScript:
Для достижения данного функционала можно воспользоваться JavaScript, чтобы добавить обработчик события на каждый элемент аккордеона и изменить его состояние при клике. Вот пример кода:
// Получаем все элементы аккордеона var accordions = document.querySelectorAll('.accordion-item'); // Добавляем обработчик события на каждый элемент accordions.forEach(function(accordion) { // Получаем заголовок и контент текущего элемента var header = accordion.querySelector('.accordion-header'); var content = accordion.querySelector('.accordion-content'); // Добавляем обработчик события на заголовок header.addEventListener('click', function() { // Проверяем текущее состояние элемента var isOpen = accordion.classList.contains('open'); // Закрываем все элементы аккордеона accordions.forEach(function(item) { item.classList.remove('open'); }); // Если текущий элемент не открыт, то открываем его if (!isOpen) { accordion.classList.add('open'); } }); });
В этом примере мы получаем все элементы аккордеона и добавляем обработчик события click
на каждый из них. При клике на заголовок элемента, мы проверяем, открыт ли текущий элемент аккордеона. Если да, то закрываем все элементы аккордеона, а затем открываем только текущий. Если элемент закрыт, мы только открываем его.
2. Использование готовых библиотек:
Если вы не хотите заниматься написанием собственного кода, можно воспользоваться готовыми JavaScript-библиотеками, которые предоставляют модули аккордеонов с возможностью открытия всех элементов. Некоторые популярные библиотеки аккордеонов включают в себя jQuery UI, Bootstrap и Foundation.
Например, с использованием библиотеки Bootstrap, вы можете просто добавить класс show
к каждому элементу аккордеона, чтобы открыть все элементы. Вот пример:
<div id="accordion"> <div class="accordion-item"> <div class="accordion-header" data-toggle="collapse" data-target="#collapseOne"> <h3>Заголовок 1</h3> </div> <div id="collapseOne" class="accordion-content collapse show"> <p>Содержимое 1</p> </div> </div> <div class="accordion-item"> <div class="accordion-header" data-toggle="collapse" data-target="#collapseTwo"> <h3>Заголовок 2</h3> </div> <div id="collapseTwo" class="accordion-content collapse show"> <p>Содержимое 2</p> </div> </div> </div> <script> $('.accordion-item').addClass('show'); </script>
В этом примере мы добавили класс show
к каждому элементу аккордеона с помощью jQuery, чтобы открыть все элементы при загрузке страницы.
Надеюсь, эти подходы вам помогут решить проблему с открытием только первого элемента аккордеона.