@sdydno

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

После открытия аккордиона шапка немного двигается сторону (при появлении скрола)...
https://codepen.io/sdydno/pen/RworyjG код
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
fallus
@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; }
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
qant
@qant
programer
Типо 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;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Могилев
от 2 800 до 3 300 $
07 мар. 2021, в 23:34
5000 руб./за проект
07 мар. 2021, в 23:14
10000 руб./за проект