[Collapsible] Does it possible to add an offset?

[nicolas-bourles]

Feature request

Overview

Hello,

I need to implement a Collapsible component with a part of the content visible in the beginning. By default, the content is hidden with this component. But I need to create an animation from the part of the content visible to the entire content visible. It doen't work...

I tried to implement a default height for the closed state, like this following example below:

const open = keyframes`
  0% { height: var(--radix-collapsible-content-height-closed) }
  100% { height: var(--radix-collapsible-content-height) }
`

const close = keyframes`
  0% { height: var(--radix-collapsible-content-height) }
  100% { height: var(--radix-collapsible-content-height-closed) }
`

Here is the visual representation of that I need to do:

State "closed"

State "opened"

Thanks a lot by advance for your help.

Best Regards.

[joaom00]

Hi @nicolas-bourles,

You can add the Collapsible.Content only on the part of the content that will be hidden.

<Collapsible.Root>
    <p>Part of the content</p>

    <Collapsible.Content>
        <p>Rest of the content...</p>
    </Collapsible.Content>
</Collapsible.Root>

[andy-hook]

@nicolas-bourles Additionally, here's an example showing how this can be animated.