Как сделать чтобы в аккордионе при клике на один другой закрывался?

Для реализации функциональности, при которой при клике на один аккордион другой будет закрываться, вам понадобится использовать JavaScript.

Вариант 1: Использование CSS и JavaScript

1. Создайте HTML-разметку для аккордиона. Каждый элемент аккордиона должен быть обернут в контейнер, например, <div>. И каждый элемент должен содержать заголовок, который пользователь будет кликать для открытия аккордиона, и содержимое элемента.

2. Стилизуйте аккордион при помощи CSS. Установите высоту, цвет фона, отступы и другие стили, определяющие внешний вид аккордиона и его элементов.

3. Создайте функцию в JavaScript, которая будет отслеживать клики по заголовкам аккордиона. Когда пользователь кликает на заголовок, функция будет срабатывать и выполнять определенные действия, чтобы открыть или закрыть аккордион.

4. Внутри функции вы должны перебрать все элементы аккордиона и проверить, открыт ли данный элемент или закрыт. Если элемент открыт, его нужно закрыть. Если элемент закрыт, его нужно открыть.

5. Чтобы закрыть элемент аккордиона, вы можете добавить класс, который будет скрывать содержимое элемента, например, display: none;. Чтобы открыть элемент, вы можете удалить этот класс.

6. Добавьте обработчик события на каждый заголовок аккордиона. Этот обработчик будет вызывать функцию, созданную в шаге 3.

Вот пример кода, показывающий, как реализовать эту функциональность:

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 1</div>
    <div class="accordion-content">
      Содержимое 1
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 2</div>
    <div class="accordion-content">
      Содержимое 2
    </div>
  </div>
</div>

.accordion {
  border: 1px solid #ddd;
}

.accordion-item {
  border-top: 1px solid #ddd;
}

.accordion-header {
  background: #f5f5f5;
  padding: 10px;
}

.accordion-content {
  display: none;
  padding: 10px;
}

// Получаем все элементы аккордиона
var accordionItems = document.querySelectorAll(".accordion-item");

// Добавляем обработчик события клика на каждый элемент
accordionItems.forEach(function(item) {
  var header = item.querySelector(".accordion-header");
  var content = item.querySelector(".accordion-content");

  header.addEventListener("click", function() {
    // Проверяем, открыт ли элемент аккордиона
    if (content.style.display === "none") {
      // Закрываем все элементы аккордиона
      accordionItems.forEach(function(item) {
        item.querySelector(".accordion-content").style.display = "none";
      });

      // Открываем текущий элемент
      content.style.display = "block";
    } else {
      // Закрываем текущий элемент
      content.style.display = "none";
    }
  });
});

Теперь, при клике на заголовок аккордиона, другие элементы аккордиона будут закрываться. Только один элемент будет открыт в любой момент времени.

Вариант 2: Использование фреймворка

Если вы используете фреймворк JavaScript, такой как jQuery или React, то реализация этой функциональности может быть еще проще.

Например, с использованием jQuery вы можете использовать методы slideToggle() и slideUp() для открытия и закрытия элементов аккордиона.

$(".accordion-header").click(function() {
  var content = $(this).next(".accordion-content");
  $(".accordion-content").not(content).slideUp();
  content.slideToggle();
});

Этот код добавит обработчик клика на заголовки аккордиона. При клике, для всех контейнеров с классом .accordion-content, кроме выбранного, будет вызван метод slideUp(), который закроет их. Затем для выбранного контейнера будет вызван метод slideToggle(), который либо откроет его (если он был закрыт), либо закроет (если он был открыт).

В итоге, при клике на любой заголовок аккордиона, другие элементы закроются, а выбранный элемент откроется.