Как плавно изменять высоту блока?

Question

[Иван Медведев]

Привет всем! Делаю аккордеон. Не могу настроить плавность изменения высоты блока.

Верстка:

<li class="faq__item">
  <div class="question">
    <h3>Which?</h3>
    <img src="assets/img/faq_ico.svg" alt="" class="faq__ico">
  </div>
  <div class="answer">
    <p>Content</p>
  </div>
</li>

Логика:

$('.question').click( function() {
    $('.answer').removeClass('open')
    $('.faq__ico').removeClass('open')
    $(this).next('.answer').toggleClass('open')
    $(this).children('.faq__ico').toggleClass('open')
})

Стили:

.answer {
        height: 0;
        overflow: hidden;
        transition: transform .3s;
        &.open {
            height: auto;
        }
        p {
            font-size: 12px;
            line-height: 1.6;
            padding-right: 28px;
            @media screen and (min-width: $lg) {
                font-size: 15px;
            }
        }
    }

При клике на вопрос, включается класс open, который через стили дает полную высоту блоку с ответом.

Comments

[YavaDev]

https://api.jquery.com/slideDown/
https://api.jquery.com/slideUp/
https://api.jquery.com/slideToggle/

Answer 1

[Ольга]

В данном случае лучше работать с max-height

.answer {
        max-height: 0;
        overflow: hidden;
        transition:all 0.5s ease;/*тут поиграться с функцией,чтобы эффект больше нравился*/
}
.answer.open {
       max-height:1000px;/*высоту по предполагаемому максимальному объему информации с запасом*/
}

Comments

[Иван Медведев]

Самое странное то, что я этот способ пробовал и не работало. Может среди нескольких попыток навертел стилей)

Сейчас сработало. Благодарю!

Answer 2

[klusovd]

Используйте готовые методы slideUp и slideDown. Будет проще и красивее. Там и скорость можно задавать.