Skip to content
Submitted 8 months ago

FAQ accordion card (Vanilla CSS)

Abere Fejiro•490
@Fejiro001
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Features:

  • Achieved perfect scores on PageSpeed Insights.🎉
  • The code was formatted with Prettier.
  • Close resemblance with the original design.

Built With:

  • npm - prettier.

I used CSS for the functionality of the FAQ accordion opening and JavaScript for only changing the aria-expanded from false to true and vice versa.

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

Image positioning for mobile really tested me, but I was able to achieve it when I added margin to the top of the section housing the FAQ questions and absolutely positioned the image.

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 8 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    ACCORDION 🔴 :

    • The best way to go with creating the accordion elements in this challenge would be with the details and summary elements. They will help us to create an accessible solution in a HTML native semantic way to create accordion elements.
    • I see you have used the button & p elements for the accordions by utilizing aria attributes, but those are not easy way of doing things using HTML native features.
    • By using details and summary elements we don't need to manually handle things using JavaScript, we can write efficient markup with this one!
    • MDN's reference is a great place to start learning about the details and summary elements if you are interested.
    • If you have any questions or need further clarification, you can always check out my submission for this challenge and/or feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    1
    Abere Fejiro•490
    @Fejiro001Posted 8 months ago

    @0xabdulkhalid Thank you for the suggestions. I have actually used details and summary for the other FAQ frontend mentor challenge, so I wanted to try other ways to do it. I got this method from W3C Web Accessibility Initiative.

    But definitely using details and summary in the long run.

    0

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