In this challenge, you will develop a responsive accordion-style FAQ section based on the supplied designs. Users can click or tap a question to reveal its answer. The accordion should transition smoothly between the expanded and collapsed states.

Implementation requirements

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Interactivity:
  • Accordion: User should be able to click or tap on a question to reveal its answer, with clear visual indicators for expandable and collapsible states (including icon change).
  • Links: Implement and style links to reflect different states - normal, hover, and focus.
  • Button states: Implement and style buttons to reflect different states - normal, hover, focus, and disabled.
• Responsive behavior:
  • Text size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
  • Responsive accordion: The content should stack vertically on smaller screens and align horizontally as the screen width increases. The accordion should default to all sections collapsed on mobile, with the option for users to expand each individually.
• Content uniformity: Verify that the text content within the accordion is identical across all device views, with no discrepancies in wording or order.
• Placeholders: For the buttons / links where the action / destination is unspecified, you may leave the href values empty.
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
• [Stretch goal] Performance optimization: Code for fast load times with efficient CSS and JavaScript techniques.
• [Stretch goal] Accessibility compliance: Ensure the accordion is accessible, employing proper ARIA roles and properties for screen readers, and maintaining full keyboard functionality for navigation.

Tips

• For the purpose of screenshots, all the accordion items should be expanded initially.