Skip to content
Submitted 5 months ago

FAQ Accordion with Vanilla JavaScript

Aaron•100
@AaronL9
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?

I'm proud that I simplified JavaScript code with this project. I probably add some animation next time.

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

I ran into a problem where the button icon size is different despite having the same width and height. What I did instead was use a before pseudo-element for the icon.

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

  1. I'm struggling with a button with an icon. Should I use an image tag or should I just use a before pseudo-element and just add a background image? I ended up using the before pseudo-element, but I would like to hear your opinion about this.

  2. I need help with this if this is semantically correct.


  
    
      How can I get help if I'm stuck on a Frontend Mentor challenge?
    
    
  

  
    The best place to get help is inside Frontend Mentor's Discord
    community. There's a help channel where you can ask questions and
    seek support from other community members.

Thank you in advance.

Community feedback

  • Shoaib Shuja•560
    @ShoaibShujaPosted 5 months ago

    Amazing job my friend on completing the challenge.

    • You can make even make an image clickable by using the onclick property which evades the need for creating a button or adding an image inside a button, but you did a pretty job as well.
    • And also, the text doesn't seem to have a semantical issue but if you ever seem to have an issue with texts being too long and you want to copy a paragraph, the index file which comes with the starter code contains all the texts which are used inside the challenge. You can change the starter index file's name and keep it just in case then create your own index.html file.

    Hope this helps and have a beautiful day my friend.

    0
    Aaron•100
    @AaronL9Posted 5 months ago

    @ShoaibShuja Thanks for feedback

    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