Submitted 8 months ago

FAQ Accordion

arnon-bright•160

@arnon-bright

Preview site View code

This is a solution for...FAQ accordion

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

At first I couldn't get the button icon to change and the answer to show up when clicked, So I ask chatgpt for help. I didn't want to but I tried everything solution that I find on the Internet but it doesn't worked, So chatgpt is the last resort.

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

Tried to make a ease in and out transition but it doesn't work

Community feedback

Leonardo•100
@ls-cabreiraPosted 8 months ago
The reason the transition is not smooth is because you are using the toggle method. When you add a class, there is no transition. A very popular solution that you can find on YouTube and the official W3S website is to change the element's height property and not its classlist.

Take a look at this article: https://www.w3schools.com/howto/howto_js_accordion.asp

Basically, you need to set the container's maximum height to 0 and add the following properties in the CSS:

transition: max-height, 200ms ease; overflow: hidden;

In the article, you will see how to access the style attribute and change the height dynamically in your script.

I hope you find that feedback useful :)
0

Please log in to post a comment

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