Как сделать плавное открытие аккордиона в jquery?

Question

[Toy Boy]

После открытия аккордиона шапка немного двигается сторону (при появлении скрола)...
https://codepen.io/sdydno/pen/RworyjG код

Comments

[Вадим]

Свойство display не анимируемое.
Посмотрите на этот метод jQuery
https://basicweb.ru/jquery/jquery_effect_slidetogg...

[Toy Boy]

Вадим, использовал .slideToggle, но мои аккордионы полностью исчезают после действия(

Answer 1

[fallus]

Если речь конкретно о JQuery, то можно не добавлять класс active.

Можно просто заменить это:
$this.toggleClass("active");
на это:

$this.find('.accordion__content').slideToggle(500); // 500 — скорость появления\исчезновения

А скролл будет появляться при переполнении контента по вертикали.

Ну, либо вовсе убрать скроллбар:

html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; }
html, body { -ms-overflow-style: none; overflow: -moz-scrollbars-none; }

Comments

[Toy Boy]

и как сделать чтобы 1 аккордеон открывался? когда открываешь одну, другой закрывался, подскажите пожалуйста.

Answer 2

[Anton]

Типо 2 вопроса в одном? не лучший способ спрашивать про css и ставить тег javascript...

1. Плавность: Указать конкретно что именно должно быть transition
Например max-height у блока

.accordion__item {
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    max-height: 46px;
    transition: max-height .2s ease-out;
    overflow: hidden;
}

.accordion__item.active {   
    max-height: 500px;
    transition: max-height .5s ease-in;
}

2. контент сдвигаеться тк появляется скроолл справа
можно починить зафиксировав скрол вот так:

body {
  max-width: 1400px;
  margin: 0 auto;
  overflow-y: scroll;
}

или убрать скрол совсем изменив нижнюю строчку: overflow-y: hidden;