Frontend Mentor - FAQ accordion solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

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

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Netlify

My process

In this challenge I practised to create responsive and accessible web page.

• Implemented hiding/showing the answer to a question when the question is clicked
• Added page navigation and hiding/showing the answer to a question with Tab and Enter keys
• Used CSS media-query to achieve responsible page elements size
• Interactive elements on the page react on hover and focus states
• Improved hiding-showing behavior with smooth transition

Built with

• Semantic HTML5 markup
• CSS Flexbox
• CSS media queries
• JS (DOM API)

What I learned

• Learned to make interactive page for keyboard navigation with :focus pseudoelement and HTMLElement.blur() method
• Made an animated accordion using JS and transitions on elements with [area-expanded] attribute.

.accordion-item[area-expanded=true] h2 {
    background-image: url("./assets/images/icon-minus.svg")
}

.accordion-item[area-expanded=true] p {
    opacity: 1;
    min-height: -moz-fit-content;
    min-height: fit-content;
    padding-bottom: 25px;
    transition: all .3s linear
}

.accordion-item[area-expanded=false] h2 {
    background-image: url("./assets/images/icon-plus.svg")
}

.accordion-item[area-expanded=false] p {
    opacity: 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    transition: all .3s linear
}

Continued development

I'd like to follow web accessibility practices.

Useful resources

• W3C - This helped me to make an accessible accordion.
• MDN web docs - MDN article about keydown event.
• MDN web docs - Adding and removing focus from an element.
• MDN web docs - Using background images.

Author

• GitHub - Tetiana B.
• Frontend Mentor - @Shcracoziabra