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

Question

[Евгения]

Первый раз делаю аккордеон, додумалась только до того, чтобы display:none / block чередовать
это свойство нельзя анимировать. Пробовала делать как тут https://html5css.ru/edithtm/index.php, но из-за того, что у меня список, так не выходит - все время торчит цветная подложка, даже если задать нулевую высоту и паддинги. пробовала его транслейтить наверх, но он в любом случае занимает свое место. накладываться пункты друг на друга не должны.
Какие еще есть варианты?

Answer 1

[Виктор Майоров]

С помощью max-height и transition. Для корректной анимации нужно перед установкой panel-close узнать изначальную высоту через js установить maxHeight

Comments

[Vlad_hex]

В коде небольшой баг (а может фича :) ) когда по крестику кликаешь он при разворачивании аккордеона, не меняет свой вид, как ожидается.

[Виктор Майоров]

Vlad_hex, ну тут не фриланс) пусть автор сам правит баги)

[Евгения]

Виктор Майоров, прекрасное решение! спасибо вам огромное!
проблема с крестиком решилась добавлением pointer-events: none, поскольку на него отдельно и не должно быть нажатия - он же просто иконка, показывающая состояние

[szQocks]

AlexandraWeather, а что другие ответы не надо решением отмечать ? если они тебе не понравились или что ? ниже там вижу ещё 2 ответа верных, одно через гриды - где парень скинул ссылку на видео, и второй вариант через установку оптимальной высоты, которую можно узнать через scrollHeight у блока

[Евгения]

szQocks, и я лайкнула) кто видео скинул не сделал же решение, а просто скинул видео, которым я не воспользовалась
что использую, то и отмечаю. Если тут надо каждое решение проверять и отмечать, окей, я не знала

[szQocks]

AlexandraWeather, представь себе, надо) люди же время тратили на тебя, ну ты чоо

Answer 2

[Алексей]

Можно гриды попробовать https://youtu.be/B_n4YONte5A?si=9r_06AFYgXvLqdMH&t=122

Answer 3

[0xD34F]

Элементу с контентом задаём нулевую высоту, убираем отображение содержимого за границами элемента, добавляем анимацию. Надо контент показать - выставляем элементу высоту равной высоте его содержимого.

.panel {
  height: 0;
  overflow: hidden;
  transition: all 0.4s;
}

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)));
});

https://jsfiddle.net/sw5m0jfc/

Answer 4

[Георгий Тудоси]

Я бы рекомендовал вовсе не использовать аккордеоны — это ад с точки зрения пользователя. Лучшее решение — длинный документ с прокруткой и оглавление со ссылками на разделы. На широких экранах оглавление удобно размещать сбоку, на узких (например, на мобильных) решать как-то иначе — например, с гамбургером. Не слишком элегантная конструкция, но лучше исходной.

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

Comments

[Евгения]

дизайнеру не прикажешь

[Deita]

Раскритиковать можно все элементы интерфейса. И, в итоге, мы придём к тому, что лучше всего, человеку дать в руки лист А4, с TimesNewRoman 12. Если бы, вы, проводили какието исследования, то, вы с этим тезисом, тоже не спорили бы. А я проводил. Давал разным возрастным группам, которые, никогда, с настольными операционными системами, ничего общего не имели, только с смартфонами, проверить интерфейс, с точки зрения взаимодействия с пользователем. И могу с уверенностью сказать, что весь интерфейс это зло. Не только каруселька, или аккордион, и пр. А абсолютно весь. Каждая группа людей, реагирует совершенно по разному, на разные элементы UI. Например, более взрослые люди, абсолютно не понимают, что происходит на экране, когда появляется модальное окно. У них лицо начинает скукоживаться, и они не пытаются решить проблему (т.е. найти крестик), они от разочарования ищут кнопку выключения девайса. Чтобы уйти от проблемы навсегда. И больше не пользоваться новыми технологиями. Для нас, да, это всё абсолютно понятно, что бывают т.н. наслоения, окон, друг над другом, или под друг другом они могут прятаться. Аля нео скевоморфизм на максималках, но для них, такое поведение, абсолютно непонятно. После скажем пользования телевизором. Другие вещи, менее зрелому поколению, более ясны и наоборот, не предугадаешь без тестов. В конечном итоге, важен не сам продукт, а для кого мы его делаем. Первым делом надо ответить всем на вопрос о целевой аудитории. Угодить всем, с данным подходом невозможно, если у вас не массовый продукт, то и разбираться как им пользоваться никто не будет. Поэтому делайте всё по максимуму, и не пытайтесь никому угодить, на ранней стадии, потому что воронка будет такой же. Почитайте книжки, например Стив Круг "Don't make me think", и др. их миллионы, всей жизни не хватит, чтобы разобраться в том, что с точки зрения пользователя ад, а что такое райский интерфейс. Нельзя так утверждать, ад не ад, оно всё ад.

Идеальный интерфейс, это вообще его отсутствие ктото скажет. А ктото усложнит задачу, скажет, что это одна красная кнопка, при нажатии на которую, мне вываливается банан из потолка



Вы так уверенно залетели

"Я бы рекомендовал вовсе не использовать аккордеоны — это ад с точки зрения пользователя. "

с такими громкими и пустыми лозунгами, "я бы не рекомендовал", "вовсе", "это ад", "с точки зрения пользователя!". Вам бы тексты для кликбейтных заголовков сочинять сидеть, выхлопа больше будет.

Что значит не рекомендовал, а кто вы, специалист в области UX/UI у которого 1100 долларов в час зарплата на Wall Street, и что за ад/рай, и если пользователь - то какой он вообще, его портрет. Вдруг там вообще какойто продвинутый хипстер на той стороне экрана, и которому наоборот недостаточно статичной HTML странички, и которого как меня просто корёбит от гамбургера.

Покажите мне "райский" интерфейс, сделаю на него видеообзор, ревью. Или порекомендуйте литературу, или сайт, где можно про него прочитать, что же такое этот райский UI в комплексе, всегда было интересно.

Тот кто умеет пользоваться спойлером, он, быстро поймёт что к чему. С моей точки зрения, будет лучше, если аккордеон будет разворачиваться при первом скроле страницы, и заворачиваться сам, чтобы намекнуть пользователю, что внутри дополнительная информация (опять же, если там не будет сильно много контента, в каждом спойлере, внутри). А, ктото скажет что и это бред, пусть сами учатся, если им надо.

Покажет только конверсия, "ад или рай". А не громкие лозунги. Которые только хуже делают. Другого метода выяснить не существует, и это тоже работа абсолютно других специалистов.