Accordion animation example about tailwindcss-radix

[ecklf]

The demo components use the radix-state-[open/closed] variants https://github.com/ecklf/tailwindcss-radix/blob/main/demo/components/Accordion.tsx#L47. There is no full example using headlessui, but feel free to contribute one if you want to :).

currentItem is just a value that you keep track of with onValueChange https://www.radix-ui.com/docs/primitives/components/accordion#api-reference.

[kelenakamura]

yeah in the example though its not the animated version (like the radix example - https://www.radix-ui.com/docs/primitives/components/accordion) i ended up using their stitches method with a styled component to get it to work, as for some reason my radix-state-open prefixes weren't getting generated properly it seemed. will take a look at the headless ui approach again though.

[ecklf]

The person who contributed this bit of the docs seems to go with a framer motion approach now: https://github.com/domosedov/domosedov-ui/blob/master/src/components/accordion.tsx.

It's not the first time I hear about issues getting that headlessui example to work so I'll go ahead and remove it. Feel free to open a PR if your research leads you to a working example.

[kelenakamura]

Ah thanks for the link - that example with framer motion actually works better than relying on --radix-accordion-content-height - which didn't seem to work if there was an image inside the content.

[elhe26]

Hey @ecklf, I was trying to implement group-radix-state-open:rotate-180 as-is but it didn't work.

[ecklf]

Hi @elhe26 seems unrelated to this specific issue (OP tries to animate the accordion content height). Mind creating a new issue and providing a reproduction? Thanks 🤝 !