# Collapse

*Category:* Components
*Section:* Show/Hide
*Source:* https://uikit.developers.rio.cloud/#/components/collapse
*Captured:* 2026-04-27T14:57:27.013Z

The Collapse component folds and unfolds given content. It is used in some other components such as the ExpanderPanel and ExpanderList.

## Collapse

> Note: In case the content element you pass in as child has margins, wrap it within another div to smoothen the animation.

### Example: Content will stay in the DOM even when it is collapsed

Content will stay in the DOM even when it is collapsed
Hide content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
Dropdown

#### React (tsx)

```tsx
import { useState } from 'react';

import Collapse from '@rio-cloud/rio-uikit/Collapse';
import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';
import Notification from '@rio-cloud/rio-uikit/Notification';
import ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import { dummyText } from '../../../utils/data';

export default () => {
    const [show, setShow] = useState(true);

    return (
        <>
            <FormLabel>Content will stay in the DOM even when it is collapsed</FormLabel>
            <div>
                <ToggleButton className='margin-bottom-10' active={show} onClick={() => setShow(!show)}>
                    {show ? 'Hide content' : 'Show content'}
                </ToggleButton>
                <Collapse
                    open={show}
                    onEntered={() => Notification.info('opened')}
                    onExited={() => Notification.info('closed')}
                >
                    <div className='panel-wrapper'>
                        <div className='panel panel-default'>
                            <div className='panel-body'>
                                <div className='margin-bottom-15'>{dummyText}</div>
                                <ButtonDropdown
                                    title='Dropdown'
                                    items={[{ value: 'Item 1' }, { value: 'Item 2' }, { value: 'Item 3' }]}
                                />
                            </div>
                        </div>
                    </div>
                </Collapse>
            </div>
        </>
    );
};
```

#### HTML (html)

```html
<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Content will stay in the DOM even when it is collapsed</div>
<div>
    <button type="button" class="btn btn-default btn-toggle active btn-component margin-bottom-10" tabindex="0">Hide content</button>
    <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
        <div class="panel-wrapper">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="margin-bottom-15">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
                    <div class="dropdown btn-group">
                        <button type="button" id="qxk3g9znt6o" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Dropdown<span class="caret">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| open | boolean \| undefined | false | Show the component and triggers the expand or collapse animation. |
| unmountOnExit | boolean | — | Unmount the component (remove it from the DOM) when it is collapsed. |
| appear | boolean | false | Run the expand animation when the component mounts, if it is initially shown. |
| timeout | number | 270 | Duration of the collapse animation in milliseconds. |
| onEntered | () => void | — | Callback fired after the component has expanded. |
| onExited | () => void | — | Callback fired after the component has collapsed. |
| onAnimationStart | () => void | — | Callback fired when the animation starts for either expand or collapse. |

### Example: Content will be removed from the DOM when it is collapsed and mounted again on show

Content will be removed from the DOM when it is collapsed and mounted again on show
Hide content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### React (tsx)

```tsx
import { useState } from 'react';

import Collapse from '@rio-cloud/rio-uikit/Collapse';
import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';
import Notification from '@rio-cloud/rio-uikit/Notification';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import { dummyText } from '../../../utils/data';

export default () => {
    const [show, setShow] = useState(true);

    return (
        <>
            <FormLabel>Content will be removed from the DOM when it is collapsed and mounted again on show</FormLabel>
            <div>
                <ToggleButton className='margin-bottom-10' active={show} onClick={() => setShow(prevShow => !prevShow)}>
                    {show ? 'Hide content' : 'Show content'}
                </ToggleButton>
                <Collapse
                    open={show}
                    onEntered={() => Notification.info('opened')}
                    onExited={() => Notification.info('closed')}
                    unmountOnExit
                >
                    <div className='panel-wrapper height-150'>
                        <div className='panel panel-default'>
                            <div className='panel-body'>{dummyText}</div>
                        </div>
                    </div>
                </Collapse>
            </div>
        </>
    );
};
```

#### HTML (html)

```html
<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Content will be removed from the DOM when it is collapsed and mounted again on show</div>
<div>
    <button type="button" class="btn btn-default btn-toggle active btn-component margin-bottom-10" tabindex="0">Hide content</button>
    <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
        <div class="panel-wrapper height-150">
            <div class="panel panel-default">
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| open | boolean \| undefined | false | Show the component and triggers the expand or collapse animation. |
| unmountOnExit | boolean | — | Unmount the component (remove it from the DOM) when it is collapsed. |
| appear | boolean | false | Run the expand animation when the component mounts, if it is initially shown. |
| timeout | number | 270 | Duration of the collapse animation in milliseconds. |
| onEntered | () => void | — | Callback fired after the component has expanded. |
| onExited | () => void | — | Callback fired after the component has collapsed. |
| onAnimationStart | () => void | — | Callback fired when the animation starts for either expand or collapse. |