Instructions

In this project, you will create an FAQ Accordion for an applicant tracking system (ATS) software-as-a-service (SaaS) application. The accordion will be featured on the landing page, providing potential users with important information about the service.

This project will help you practice essential frontend development skills including HTML, CSS, and JavaScript, with a focus on interactivity and user experience.

Your accordion should allow users to toggle the visibility of answers to frequently asked questions.

You are free to use any tools and frameworks you prefer, but the final implementation must meet the specified user stories and acceptance criteria.

Make sure the design looks great on both desktop and mobile devices. You may wish to leverage a CSS framework like Tailwind or Bootstrap to take advantage of utility classes and some helpful defaults.

The project should be version-controlled using Git, with regular commits documenting your progress.

User Stories

1. User can see a list of questions, each appearing within its own bordered box, as shown in the design.
2. User can click on a question to reveal its answer.
3. User can click on the same question again to hide the answer.
4. User can only see one answer at a time; opening a new answer hides the previous one.
5. The FAQ section is visually appealing and matches the overall design of the landing page.
6. The FAQ section is responsive and works well on both desktop and mobile devices.

Stretch Goals

If you want to go above and beyond, elevate your project by choosing one or more of these additional objectives:

1. Add animation effects:
   • Use CSS animations to add a smooth sliding effect when toggling answers.
2. Enhance accessibility:
   • Ensure the accordion is fully accessible, including keyboard navigation and ARIA roles.