Collapsible

A component that lets you collapse/show the content inside it using a slide animation.

Import#

import { Collapsible } from '@pixby/ui';

Collapsible: The base collapsible component.

Usage#

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

Props#

`isOpen`#

Toggle the collapsible by using the isProp prop.

`startHeight`#

Sometimes you want to show some content, and then let the user toggle more. Use the startHeight prop to show some content when the collapsible is closed.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

Behaviour notes#

Collapse uses the offsetHeight property of the element, which does not include margin. If you want space between the collapsible and the element above you can wrap the content in a div with top padding (see the first example on this page).