This is a solution to the FAQ accordion challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Hide/Show the answer to a question when the question is clicked
- Navigate the questions and hide/show answers using keyboard navigation alone
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Desktop
- Mobile
- Semantic HTML5 markup
- Sass
- Flexbox
- Mobile-first workflow
- TypeScript
- Vite for development and build process
- GitHub Pages for deployment
It was really cool to create an accordion without writing a single javascript code. To achieve this, i make use of the native accordion functionality provided my the sematic html details and summary as shown below:
<details>
<summary>What is Frontend Mentor?</summary>
<p>Frontend Mentor offers realistic coding challenges to help developers improve their frontend skills.</p>
</details>Then I use css to manage the opening and closing state:
details {
position: relative;
}
details summary {
list-style: none;
appearance: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
}
details summary::after {
content: "";
width: 16px;
height: 16px;
background-image: url('path/to/closed-icon.svg');
background-size: contain;
background-repeat: no-repeat;
}
details[open] summary::after {
background-image: url('path/to/open-icon.svg');
}I plan to explore advanced SASS features to enhance the maintainability and scalability of my stylesheets. I also intend to further integrate TypeScript in future frontend projects to reinforce type safety and streamline debugging.
- CSS-Tricks: Flexbox Guide - This guide was instrumental in implementing the flexible layout of the component.
- MDN Web Docs: CSS Display Property - Helped me with controlling element visibility.
- Frontend Mentor Community - Engaging with other developers in the community provided insights and useful tips for handling responsive layouts.
👤 Engr. Animashaun Fisayo
This project was completed as part of the Frontend Mentor challenge. The platform provided an excellent opportunity to practice and refine my front-end skills through realistic project challenges.