Как сделать аккордеон на CSS

Для создания аккордеона на CSS можно использовать свойство «display: none» для скрытия контента, который будет раскрываться при клике на заголовок. При этом, при помощи псевдокласса «:checked» можно изменять свойство «display» на «block» для соответствующего контента.

Пример кода:

HTML:

<div class="accordion">
  <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
  <label for="accordion-1">Заголовок 1</label>
  <div class="accordion-content">
    Контент 1
  </div>

 input type="checkbox" id="accordion-2" name="accordion-checkbox" hidden>
  <label for="accordion-2">Заголовок 2</label>
  <div class="accordion-content">
    Контент 2
  </div>

  <input type="checkbox" id="accordion-3" name="accordion-checkbox" hidden>
  <label for="accordion-3">Заголовок 3</label>
  <div class="accordion-content">
    Контент 3
  </div>
</div>

CSS:

.accordion label {
  display: block;
  cursor: pointer;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

.accordion-content {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.accordion input[type="checkbox"]:checked + label + .accordion-content {
  display: block;
}

В данном примере при клике на заголовок аккордеона происходит раскрытие соответствующего контента. Каждый заголовок и контент обернуты в свои соответствующие теги, а также имеют уникальные идентификаторы для связи между собой.