Submitted almost 3 years ago

plain js, SASS, BEM notation

MichalTrubini•1,220

@MichalTrubini

Preview site View code

This is a solution for...FAQ accordion card

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi there,

I have used plain javascript, as jQuery is kinda cheating (easy way out). :-)

I was also thinking about adding a sliding animation when a question is clicked on, however, the height of the answer div is not the same in all the instances, so I am not sure how to animate it. The solutions I found online required to use a specific height in px.

Thanks for the feedback.

Community feedback

Byron•2,290

@byronbyronPosted almost 3 years ago

Hi Michal

Not sure if you've come across transitioning the max-height instead. Works best when you know the height will never go above a certain value, in this case 100px.

.answer__body {
    padding: 0;
    line-height: 1.8rem;
    width: 90%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s;
}

.answer-visible {
    max-height: 100px;
}

.answer-visible p {
    margin-bottom: 1.5rem;
}

<div class="answer__body answer-visible" data-selected="1">
    <p>You can invite up...</p>
</div>

Everything else looks good! 👍

Marked as helpful

MichalTrubini•1,220
@MichalTrubiniPosted almost 3 years ago
Hi Byron,

This was a great suggestion. The answer was so simple: instead of height, use max-height!

I had to add "line-height: 0" to the answer__body class and "line-height:1.8rem" to answer-visible for it to work. Also, added padding to animation so that there was no stutter.

There is one small bug still which I need to figure out: slide-down is animated, but slide-up is not, even though I added the transition attribute to answer__body.

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