Как создать аккордеон для блока "FAQ" или "Вопрос - Ответ"

Аккордеон - это раздел, содержащий заголовок и описание с функциями открытия и закрытия. По сути, описание аккордеона находится в скрытом состоянии, и мы должны нажать на раздел заголовка, чтобы получить описание. Заголовок каждого аккордеона имеет свое собственное описание. Аккордеон может быть составлен из различного текстового содержимого, например FAQ.

✅ Скачать готовы код: 

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

Если вы нажмете на каждую вкладку, она откроется и закроется, также, если одна из них находится в открытом состоянии, и вы нажали на другую вкладку, ранее открытая вкладка автоматически закроется и откроется вкладка, на которую вы нажали.

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

Для создания дизайна пользовательского интерфейса этого аккордеона я использовал HTM и CSS, а для его открытия и закрытия и, очевидно, автоматического закрытия я использовал код Javascript