Skip to content
Submitted over 1 year ago

FAQ Accordion using Pure HTML, CSS, and JS

Celine Tran•120
@CelineTrann
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Is there a way to make the transition between display: hidden and block to be more smooth?

I am also having an issue where the answer will only appear when I click on the text, but not the "plus" image. Is there a way to have it so that the accordion opens when I click the entire div?

Thank you in advance!

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • P
    Daniel 🛸•44,760
    @danielmrz-dev

    Hello @CelineTrann!

    Your solution looks great!

    About your questions:

    • Is there a way to make the transition between display: hidden and block to be more smooth?

    I faced the same issue recently and I found out that it's not possible to add transitions to the property display. Some people use opacity: 0;, width: 0; or height:0; to "hide" the element and use javascript to change its value to when clicked. It's works very well.

    • I am also having an issue where the answer will only appear when I click on the text, but not the "plus" image. Is there a way to have it so that the accordion opens when I click the entire div?

    I noticed that half of your Javascript code is marked as comment, like when you use //. Could that be the problem? Because I don't see the variable for your question entire div anywhere else on your code.

    I hope it helps! 😊

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