Как подружить два одинаковых аккардиона?

Для подружения двух одинаковых аккордеонов в JavaScript с помощью нативного кода или с использованием библиотеки, например, jQuery, вам понадобятся несколько шагов.

1. Добавьте обработчик события на каждый заголовок аккордеона для слежения за кликами. В обработчике событий вы должны выполнять действия с аккордеонами.

2. В обработчике событий, при клике на заголовок аккордеона, вы должны выполнить следующие действия:

- Скрыть все панели аккордеона, кроме той, на которую произошел клик. Вы можете использовать цикл или метод перебора элементов для того, чтобы скрыть все панели.

- Аналогично, скрыть все заголовки аккордеона, кроме заголовка, на который произошел клик.

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

Давайте рассмотрим пример нативного кода для подружения аккордеонов:

// Получим все заголовки аккордеона
var headers = document.querySelectorAll('.accordion-header');

// Добавим обработчик события для каждого заголовка
headers.forEach(function(header) {
   header.addEventListener('click', function() {
      // Скрыть все панели аккордеона, кроме текущей
      var panels = document.querySelectorAll('.accordion-panel');
      panels.forEach(function(panel) {
         if (panel !== header.nextElementSibling) {
            panel.style.display = 'none';
         }
      });
      
      // Скрыть все заголовки аккордеона, кроме текущего
      headers.forEach(function(element) {
         if (element !== header) {
            element.classList.remove('active');
         }
      });
      
      // Показать или скрыть панель аккордеона
      var panel = header.nextElementSibling;
      if (panel.style.display === 'block') {
         panel.style.display = 'none';
         header.classList.remove('active');
      } else {
         panel.style.display = 'block';
         header.classList.add('active');
      }
   });
});

В этом примере мы используем селектор '.accordion-header' для получения всех заголовков аккордеона и селектор '.accordion-panel' для получения всех панелей аккордеона. Мы присваиваем обработчик события для каждого заголовка, который проверяет, какой заголовок был кликнут, и выполняет соответствующие действия.

Внутри обработчика события мы скрываем все панели аккордеона, кроме той, на которую был клик, скрываем все заголовки аккордеона, кроме текущего, и показываем или скрываем панель, на которую был клик, в зависимости от ее текущего состояния. Мы также добавляем и удаляем класс 'active' для стилизации выбранного заголовка.

Вы можете адаптировать этот код к вашим потребностям или использовать его вместе с библиотекой, такой как jQuery, чтобы упростить обработку событий и манипуляцию с DOM-элементами.