@AlexandraWeather

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

Первый раз делаю аккордеон, додумалась только до того, чтобы display:none / block чередовать
это свойство нельзя анимировать. Пробовала делать как тут https://html5css.ru/edithtm/index.php, но из-за того, что у меня список, так не выходит - все время торчит цветная подложка, даже если задать нулевую высоту и паддинги. пробовала его транслейтить наверх, но он в любом случае занимает свое место. накладываться пункты друг на друга не должны.
Какие еще есть варианты?
  • Вопрос задан
  • 451 просмотр
Решения вопроса 3
victormayorov
@victormayorov
Frontend разработчик
С помощью max-height и transition. Для корректной анимации нужно перед установкой panel-close узнать изначальную высоту через js установить maxHeight
Ответ написан
@Azperin
Дилетант
Можно гриды попробовать https://youtu.be/B_n4YONte5A?si=9r_06AFYgXvLqdMH&t=122
Ответ написан
Комментировать
0xD34F
@0xD34F Куратор тега CSS
.panel {
  padding: 0 15px;
  transition: all 0.4s;
  height: 0;
  overflow: hidden;
}

.faq-item.active .panel {
  padding: 15px 15px 20px;
}

.faq-item.active .cross {
  transform: rotate(45deg);
}

const containerSelector = '.faq-list';
const itemSelector = '.faq-item';
const headerSelector = '.accordion';
const contentSelector = '.panel';
const activeClass = 'active';
const toggle = item => item
  ?.closest(containerSelector)
  ?.querySelectorAll(itemSelector).forEach(n => {
    const state = n === item && !n.classList.contains(activeClass);
    const content = n.querySelector(contentSelector);
    n.classList.toggle(activeClass, state);
    content.style.height = `${state ? content.scrollHeight : 0}px`;
  });

document.addEventListener('click', e => {
  toggle(e.target.closest(headerSelector)?.closest(itemSelector));
});

// или

document.querySelectorAll(headerSelector).forEach(n => {
  n.addEventListener('click', toggle.bind(null, n.closest(itemSelector)));
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
GeorgeTudosi
@GeorgeTudosi
Технический директор, кинематографист, яхтсмен
Я бы рекомендовал вовсе не использовать аккордеоны — это ад с точки зрения пользователя. Лучшее решение — длинный документ с прокруткой и оглавление со ссылками на разделы. На широких экранах оглавление удобно размещать сбоку, на узких (например, на мобильных) решать как-то иначе — например, с гамбургером. Не слишком элегантная конструкция, но лучше исходной.

Если же аккордеон почему-то необходим, возьмите старый добрый jQuery и slideUp(), slideDown(), slideToggle() в зависимости от требуемого поведения. Можно и вручную написать, но с библиотекой проще и совместимость лучше.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы