Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ Accordion using Pure HTML, CSS, and JS

@CelineTrann

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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!

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

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! 😊

0

Please log in to post a comment

Log in with GitHub
Discord logo

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