FAQ Accordion Card - HTML/CSS/JS

Solution retrospective
Hello !
I have a question :
- How could I do a transition so that when I open/close a question the action goes smoothly ? Because I use "display: none" and "display:block", thus, the text appear directly.
Thank you :)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Asylcreek
You would have to use a properties that are transitionable. Based on your markup, you could use the following:
.answer{ opacity: 0; visibility: hidden; position: absolute; top: -1rem; left: 0; transition-property: top, opacity; transition-duration: .2s; } .active{ opacity: 1; visibility: visible; top: 0; position: relative; }
The
position: absolute
is to take it out of the flow of the document.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