Skip to content

Conversation

Hoppi164
Copy link

This PR adds a transition to the accordion component when expanding or collapsing.
This solution uses only CSS

Note: the interpolate-size css property is required to make this work.
The interpolate-size property is experimental with ~70% global browser adoption.

for this reason i've also added a fallback solution to transition the margin-bottom of the summary element which fakes a similar effect.

Screencast.from.2025-06-20.20-39-34.mp4

Inspired by this stack overflow answer:

https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal#Toggle%20details%20height%20from

@Hoppi164
Copy link
Author

@lucaslarroche

Feel free to make any adjustments you deem necessary,
alternatively please let me know if you need me to change anything.

Love your work mate
I use Pico CSS on all my personal projects
<3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant