Раскрывающийся влкадки на css, как добавить анимаци?

Question

[Антон Вебсайтовский]

Всем привет.
Сделал простые раскрывающиеся вкладки на css, как добавить анимацию, пробовал сделать, вышло, но есть косяк, когда закрываем вкладку, то видно как текст вылезает за рамки, что с этим можно сделать?

Может не подходящая анимация, посоветуйте или приведите пожалуйста пример, спасибо за помощь.

Рабочая схема: https://jsfiddle.net/wxy4m370/1/

Успел заскринить как текст выходит, когда сворачиваем вкладку.

Comments

[Alex]

Очень рекомендую https://habr.com/ru/post/477520/

[Антон Вебсайтовский]

Alex, о то что надо ) на чисто css )) как я и хотел, щас опробую.
Хотя там и js есть.

[Антон Вебсайтовский]

Alex, темка, а как там сделать чтобы то что я раскрыл меняло цвет заголовка раскрывающего блока. Ну по типу как я сделал на примере том что в теме.

[Alex]

Стилизировать открытый элемент можно по наличию атрибута open.

[Антон Вебсайтовский]

Alex, и то насчет поддержки браузеров, может эта тема мало где работает.

[Одиночка Айс]

Быстрое решение "в лоб" - .hdv + label ~ div уберите лишний транзишн на visibility

[Alex]

Антон Вебсайтовский, https://caniuse.com/details

[Антон Вебсайтовский]

Нашел поддержку браузеров https://caniuse.com/details

[Антон Вебсайтовский]

Alex, спасибо, попробую, а что насчет, того что идет какое-то выделение при клике, по типу бордер, хотя я его не ставил.

[Антон Вебсайтовский]

Alex, не густо поддерживает. думаю ставить или нет, может кто сидит еще на старом )

[Антон Вебсайтовский]

Одиночка Айс, а можете привести пример на моем примере, заранее спасибо.

[Антон Вебсайтовский]

Одиночка Айс, вообщем все же внедрил и уже поставил на сайт данный метод, понравился, а может есть что-то для скролбаров, чтобы и стрелки ставить можно было и без js ))

[Антон Вебсайтовский]

Alex, если что твой метод, забыл скинуть что сделал, https://jsfiddle.net/r7wzhtLs/1/
Но есть мелкая проблема, при сворачивании нет анимации, просто тупо быстро сворачивает и все.

Answer 1

[Максим]

Comments

[Антон Вебсайтовский]

а что скажете насчет, details и summary.

[Максим]

Антон Вебсайтовский, не использую - предпочитаю вот такие решения как в моём ответе

Answer 2

[Одиночка Айс]

Немного переделал пример ТС: https://jsfiddle.net/zytcsdub/

Анимация куцая, но уж какая есть)

Comments

[Антон Вебсайтовский]

Чет анимация странно работает, почти не заметно, если время менять, то не очень выходит.