Skip to content
Submitted almost 3 years ago

FAQ Accordian (HTML, CSS, JS)

Marissa Huysentruyt•165
@marissahuysentruyt
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

Hi all. I've been stuck on this FAQ project for quite some time. I finally figured out how to show the answers using vanilla JS (I'm still pretty new with it), and hide when I click on different questions, but I can't seem to get my original styles to revert after clicking off. I left some comments in my script file. I assume it's because of the for...of loop (this is also the first time I've used a for...of loop).

That said, I have a couple of questions/requests:

  1. What should I have done differently to make sure those styles revert back? Would you be willing to explain it a little for me? Do I have to do some sort of break?
  2. How do I get the answers to hide again if you click on the same question? I toyed with removeEventListener, but didn't really think that was the answer. Should I have put the event listener on the container instead of the question?
  3. Why doesn't my "carrot" animation want to trigger? Does it need to be somewhere else, not included in the answer loop?

Thanks for any guidance!

Community feedback

  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    What styles aren't reverting? The project look fine here. The only thing is the box isn't lined up properly. I just finished this a few days ago and it was pretty tough. I used radio buttons for the accordion, and at large screen widths it increases the size of the box when I click on the questions.

    My answers don't hide either. I used CSS only for this, and I used Transform Rotate on the caret symbol.

    Marked as helpful
    0
    Marissa Huysentruyt•165
    @marissahuysentruytPosted almost 3 years ago

    @brodiewebdt I wanted the question to return to the 400 font-size once you click on a different quesiton. it stays at 700 once it's clicked, even if the question isn't selected anymore (at least locally on my machine)

    I might go back and try it all with CSS too. I just finished a beginner javascript course, so I was trying to challenge myself to use javascript and put myself to th test on a project.

    Thanks for the help!

    0
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    I did CSS only because I had built one earlier and used it here. My javascript is a work in progress, so I made it easier on myself.

    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