Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive FAQ accordion page by using HTML, CSS and JavaScript

@ShoaibShuja

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Once again, I designed the layout easily by the CSS's amazing flexbox feature which did like 60% of the page done. I also figured out how to make a page's background half image and half color which I am sure would be useful in many cases. And finally, I created a JavaScript function which would toggle the display of the answer text on clicking the plus or minus icon and would change the plus or minus icon to opposite according to the display.

What challenges did you encounter, and how did you overcome them?

The half image and half color background was a rare challenge but I figured it out by learning a bit more on image backgrounds which background position and size came in handy. The function which would toggle the display of the answer text was also a bit of a challenge, but I figured it out easily by using if and else.

What specific areas of your project would you like help with?

Some more info about the layout's certain designs would be useful especially in the style guide's file.

Community feedback

Grego 1,310

@Grego14

Posted

Hello! 🎉 Congratulations on completing the challenge! 🎉

Something I recommend is to apply the line-height property to the :root with a value of 1.2-1.5 as it will help to read the text better. And maybe a little bit of letter-spacing like 1px or half a pixel.

If the images are icons or are for decoration, add the aria-hidden attribute to remove them from the accessibility tree. 👉 aria-hidden

Since the accordion is opening using the icon you should add a more specific alt attribute, something like "Click to open the accordion" as people with screen readers will read "plus icon".

That's all! I hope this helps you. 😁

Marked as helpful

0

@ShoaibShuja

Posted

Thanks a lot, I will consider them. Have a beautiful day.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord