## Introduction Hello, developers! I’m excited to share my latest project: a **FAQ Accordion** web application. This project is perfect for those looking to create an interactive and user-friendly FAQ section for their websites. It’s a great way to enhance your frontend development skills using HTML, CSS, and JavaScript while building a practical component that can be used in various applications. ## Project Overview The **FAQ Accordion** is a web application designed to display frequently asked questions in an expandable and collapsible format. With a clean and modern design, it allows users to click on a question to reveal the corresponding answer. This project showcases how to create an interactive FAQ section that improves user experience by making content easily accessible. ## Features - **Interactive Accordion**: Users can click on questions to toggle the visibility of answers, enhancing content readability. - **Responsive Design**: The application is fully responsive, ensuring an optimal viewing experience on both desktop and mobile devices. - **Dynamic Icons**: Icons change to indicate whether an answer is expanded or collapsed. ## Technologies Used - **HTML**: Provides the structure for the FAQ Accordion application. - **CSS**: Styles the application to create a clean and responsive design. - **JavaScript**: Manages the interactive elements, including expanding and collapsing answers and toggling icons. ## Project Structure Here’s an overview of the project structure: ``` FAQ-Accordion/ ├── index.html ├── style.css └── script.js ``` - **index.html**: Contains the HTML structure for the FAQ Accordion application. - **style.css**: Includes CSS styles to create an engaging and responsive design. - **script.js**: Manages the interactive elements, such as expanding and collapsing answers and updating icons. ## Installation To get started with the project, follow these steps: 1. **Clone the repository**: ```bash git clone https://github.com/abhishekgurjar-in/FAQ-Accordion.git ``` 2. **Open the project directory**: ```bash cd FAQ-Accordion ``` 3. **Run the project**: - Open the `index.html` file in a web browser to view the FAQ Accordion application. ## Usage 1. **Open the application** in a web browser. 2. **Click on a question** to toggle the visibility of the answer. 3. **Expand and collapse** different questions to view their answers. 4. **Update or add new questions** as needed. ## Code Explanation ### HTML The `index.html` file defines the structure of the FAQ Accordion application, including questions and answers. Here’s a snippet: ```html FAQ accordion

FAQs

Is Frontend Mentor free?

Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for all levels and ideal for portfolio building.

Can I use Frontend Mentor projects in my portfolio?

Yes, Frontend Mentor offers both free and premium coding challenges, with the free option providing access to a range of projects suitable for all skill levels.

Can I use Frontend Mentor projects in my portfolio?

Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent way to showcase your skills to potential employers!

How can I get help if I'm stuck on a Frontend Mentor challenge?

The best place to get help is inside Frontend Mentor's Discord community. There's a help channel where you can ask questions and seek support from other community members.

``` ### CSS The `style.css` file styles the FAQ Accordion application, ensuring it’s visually appealing and responsive. Below are some key styles: ```css * { box-sizing: border-box; margin: 0; } body { background-color: hsl(275, 100%, 97%); } img { width: 100%; position: fixed; } .container { position: absolute; } .box { top: 100px; margin: 0 auto; background-color: hsl(0, 0%, 100%); max-width: 555px; position: relative; border-radius: 13px; padding: 20px; } .imageStar img { width: 36px; margin-left: 10px; } .section { padding: 5px; } .question { padding: 10px; display: flex; align-items: center; justify-content: space-between; } .answer { display: none; overflow: hidden; padding: 10px; } .answer.active { display: block; } .icon-img { display: flex; align-items: center; justify-content: center; } .icon-img img { position: fixed; width: 19px; } @media (max-width: 700px) { .box { max-width: 500px; } } @media (max-width: 500px) { .box { max-width: 400px; } } ``` ### JavaScript The `script.js` file contains the functionality for expanding and collapsing answers. Here’s a snippet for demonstration: ```javascript const questions = document.querySelectorAll(".question"); questions.forEach(question => { question.addEventListener("click", () => { const answer = question.nextElementSibling; const icon = question.querySelector(".icon-img img"); // Toggle answer visibility answer.classList.toggle("active"); // Change icon if (answer.classList.contains("active")) { icon.src = "./assets/images/icon-minus.svg"; } else { icon.src = "./assets/images/icon-plus.svg"; } }); }); ``` ## Live Demo You can check out the live demo of the FAQ Accordion project [here](https://abhishekgurjar-in.github.io/FAQ-Accordion/). ## Conclusion Building the FAQ Accordion application was a rewarding experience in creating an interactive and user-friendly FAQ section. This project highlights the importance of user engagement and content accessibility. By applying HTML, CSS, and JavaScript, we’ve developed a component that enhances user experience by making frequently asked questions easily accessible. I hope this project inspires you to build your own interactive components. Happy coding! ## Credits This project was developed as part of my continuous learning journey in web development. ## Author - **Abhishek Gurjar** - [GitHub Profile](https://github.com/abhishekgurjar-in)

faqaccordion

Build a FAQ Accordion Website

Join Our Newsletter. No Spam, Only the good stuff.