Компонент Accordion отображает содержимое в виде списка заголовков, по которым пользователь может щелкнуть, чтобы свернуть/развернуть связанное содержимое.

Одним из распространенных вариантов использования аккордеонов является раздел Часто задаваемых вопросов - вот пример из Github's FAQ.

Щелчок по элементу открывает его, показывая содержимое. Повторный щелчок закрывает его.

Создайте компонент Accordion, который получает список элементов с заголовком и содержимым и отображает их в виде аккордеона.

<Accordion
    items={[
       { title: "Title 1", content: "Content 1" },
       { title: "Title 2", content: "Content 2" },
    ]}
  />

Каждый раздел можно открывать и закрывать по отдельности. Пользователи могут открывать несколько разделов одновременно.

Вы можете использовать эти образцы данных для тестирования:

[
  {
    title: "What is Github and how does it work?",
    content:
      "GitHub is the home for all developers—a platform where you can share code, contribute to open source projects, or even automate your workflow with tools like GitHub Actions and Packages. If you’re just getting started with GitHub, you may know us best as a place for version control and collaboration.",
  },
  {
    title: "How do I see GitHub's availability?",
    content: "Check our real-time status report",
  },
  {
    title: "Why is GitHub so popular?",
    content:
      "GitHub is built by developers for developers, and we’re proud to be home to the world’s largest open source community. With 50 million developers and millions more open source projects, GitHub has become the go-to place to collaborate and build software together.",
  },
]

<aside> ❓

Дополнительный вопрос: Как бы вы реализовали этот компонент, если бы одновременно можно было раскрывать только один заголовок?

</aside>

<aside> 🏗️

Готовы проверить свою работу?

Подробный пошаговый обзор вы найдете в разделе ниже!

Руководство по созданию компонента Accordion

</aside>