Аккордеон FAQ

HTMLCSSJS

Аккордеон — это классический элемент интерфейса, используемый для компактного размещения большого объема текстовой информации. Основная задача данного челленджа — проработка логики переключения состояний и создание качественной анимации разворачивания контента.

Этот компонент научит вас работать с состояниями элементов, доступностью (A11Y) и управлением высотой блоков в CSS.

📝 Задача

Вам необходимо сверстать виджет Часто задаваемых вопросов (FAQ). Список должен состоять из нескольких пунктов, где при клике на заголовок открывается скрытый текст ответа.

Технические требования:

• Реализовать открытие/закрытие секций (одновременное или по отдельности).
• Добавить визуальные индикаторы состояния (например, поворот иконки стрелки).
• Обеспечить корректное отображение текстового контента внутри выпадающих панелей.

Макет

Макет в Figma (FAQ accordion)

💡 Идеи для практики

1. Вы можете использовать любые технологии для выполнения задания: нативный JavaScript, современные CSS-фреймворки (Tailwind), препроцессоры (Sass/Less) или UI-библиотеки (React, Vue).
2. Помните, что «пиксель-перфект» не является обязательным требованием, но приветствуется. Вы имеете полное право на творческие эксперименты в оформлении и анимациях.
3. Попробуйте реализовать задачу с использованием семантичного тега <details> и <summary> или через управление атрибутами aria-expanded для улучшения доступности.

🤔 FAQ

Оставьте ссылку на ваше решение в комментариях ниже, например на GitHub или на live-просмотр.

Спрашивайте совета у других участников сообщества в комментариях.

Безусловно! Одна из главных идей создания этой платформы — помочь разработчикам пополнить портфолио профессионально выглядящими проектами!

Мы не предоставляем «официальных» решений для заданий, потому что не существует единственно правильного способа выполнить задание. Вместо этого мы рекомендуем изучать код других участников сообщества. Вы многому научитесь, наблюдая, как другие люди подходили к тем же заданиям.

Twep.ru — это сообщество совместного обучения, где каждый может давать друг другу обратную связь. Если вы хотите получить отзывы от сообщества, обязательно задайте конкретный вопрос при отправке своего решения. Чем точнее вы сформулируете свой вопрос, тем выше вероятность получить полезные комментарии от других участников.

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