Submitted about 4 years ago

FAQ Accordion Card - HTML/CSS/JS

Rayane•1,935

@RayaneBengaoui

Preview site View code

This is a solution for...FAQ accordion card

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

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 :)

Community feedback

Boro Omokugbo Joseph•115

@AsylcreekPosted about 4 years ago

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.

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