FAQ Accordion Section

Build a clean and modern FAQ (Frequently Asked Questions) section based on the provided design. The layout should include multiple question cards, where each item represents a question and can visually appear expanded or collapsed. Use HTML ,CSS and JavaScript to recreate the design. Focus on spacing, card styling, typography, icons, and visual hierarchy. The design should clearly differentiate between active (opened) and inactive (closed) items.

Core Build

Project Requirements

Create the FAQ section using semantic HTML5
Style the layout using CSS
Use JavaScript to handle accordion open and close behavior
Match the provided design as closely as possible
Create multiple FAQ items with question and answer content
Allow users to expand one item at a time or multiple items based on your implementation
Include visual indicators for open and closed states
Style one item as expanded by default
Add hover states for FAQ items and buttons
Use proper spacing, padding, and alignment
Maintain consistent typography across the section
Ensure the section is responsive for tablet and mobile screens
Keep code clean and organized across HTML, CSS, and JavaScript files

Submission Open

Ready to submit your solution?

Upload your project for mentor review and showcase your structure, polish, and implementation quality.

120+ developers joined

Login Required

You need to be logged in to submit your solution for this challenge.