plain js, SASS, BEM notation

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

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!