Accordion, открывается только первый элемент, как фикс?

Если вам нужно, чтобы все элементы аккордеона открывались по одному, а не только первый элемент, вам потребуется внести некоторые изменения в код. Вот несколько подходов, которые вы можете использовать:

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, чтобы открыть все элементы при загрузке страницы.

Надеюсь, эти подходы вам помогут решить проблему с открытием только первого элемента аккордеона.