Для того, чтобы создать аккордеон (контент, который можно “развернуть” и “свернуть”) необязательно использовать CSS и JavaScript. Для быстрого и эффективного решения этой задачи отлично подойдут HTML-элементы details и summary.

details позволяет развернуть скрытую информацию, а его первый дочерний элемент summary является меткой для такого виджета скрытия и раскрытия.

<details>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language. It's the foundation of the web!</p>
</details>

Это решение подходит, например, для ответов на часто задаваемые вопросы (FAQ) и многоуровневых меню.

Дополнительная информация на MDN

Спасибо за внимание.