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

Question

[Даниил Конев]

Доброго дня! На странице стоит задача сделать при нажатии на заголовок открытие блока, которые изначально в display:none стоит, это успешно реализовано. Блок скрывается и открывается.
Прикрутил js для этого: https://rosautodor.tmweb.ru/wp-content/themes/beth...
Страница которую верстаю: https://rosautodor.tmweb.ru/filials/

Вопрос, как сделать плавное открытие? пока из вариантов пробовал через css transition прописать, но это свойство не работает.

Comments

[Антон Литвиненко]

а вот раньше был джейквери....

Answer 1

[lUser L]

У вас же jq подключен к проекту, почему бы не сделать это на jq потратив минимум усилий ?

fadein
fadeout
show
hide
fadeToggle
toggle

https://jsfiddle.net/znhvu6sd/

Comments

[Даниил Конев]

Спасибо! Да действительно отличный вариант, я пробовал с JQ, но у меня почему-то в ошибку падает, типа неизвестная функция, связано скорее всего с версией JQ либо JQ модифицирован самой темой. Буду пробовать.

[lUser L]

Ivseti, окей, вот еще 2 ссылки забыл - fadein
fadeout

[Даниил Конев]

Эмиль 🔥, благодарю!

Answer 2

[Sergey]

Вы бы лучше фрагмент работающего кода с блоком выложили куда-нибудь на codepen, чтобы можно было изменить и показать вам. А так, можно замучиться объяснять.

display:none - не работает с transition,
можно использовать связку visibility и opacity (возможно добавить position: absolute чтобы не было белого поля, надо смотреть уже на месте)

visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;

ну и соответственно в активном состоянии стили такие

visibility: visible;
opacity: 1;

Решений такой задачи бегло штук 5-6 можно придумать. Можно побаловаться высотой блока и плавно анимацией выводить его из под заголовка. Но я бы лучше использовал вывод сверстанного блока с информацией из под блока с названием и прятал его там с помощью clip-path и анимацией опускал вниз.