Skip to content
Submitted 5 months ago

Responsive FAQ accordion page by using HTML, CSS and JavaScript

Shoaib Shuja•560
@ShoaibShuja
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

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
    @Grego14Posted 5 months ago

    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
    Shoaib Shuja•560
    @ShoaibShujaPosted 5 months ago

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

    1

Please log in to post a comment

Log in with GitHub

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