# ExpanderPanel

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

A simple panel component where the "panel-body" can be expanded.

## ExpanderPanel

### Example: Example 1

Toggle expander Open expander Close expander
Click me to toggle my state
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

#### React (tsx)

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

import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
import Button from '@rio-cloud/rio-uikit/Button';

const content = (
    <div>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
    </div>
);

export default () => {
    const [expanderIsOpen, setExpanderIsOpen] = useState(true);

    const handleToggleExpander = () => {
        setExpanderIsOpen(prev => !prev);
    };

    const handleForceOpen = () => {
        setExpanderIsOpen(prev => (prev ? prev : true));
    };

    const handleForceClose = () => {
        setExpanderIsOpen(prev => (prev ? false : prev));
    };

    return (
        <div>
            <div className='btn-toolbar'>
                <Button bsStyle='primary' onClick={handleToggleExpander}>
                    Toggle expander
                </Button>
                <Button onClick={handleForceOpen} disabled={expanderIsOpen}>
                    Open expander
                </Button>
                <Button onClick={handleForceClose} disabled={!expanderIsOpen}>
                    Close expander
                </Button>
            </div>
            <div className='display-grid grid-cols-1 grid-cols-2-lg'>
                <div className='padding-top-20'>
                    <ExpanderPanel
                        open={expanderIsOpen}
                        title='Click me to toggle my state'
                        bsStyle='default'
                        onEntered={() => setExpanderIsOpen(true)}
                        onExited={() => setExpanderIsOpen(false)}
                    >
                        {content}
                    </ExpanderPanel>
                </div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-primary btn-component" tabindex="0">Toggle expander</button>
        <button type="button" class="btn btn-default btn-component" disabled="" tabindex="0">Open expander</button>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Close expander</button>
    </div>
    <div class="display-grid grid-cols-1 grid-cols-2-lg">
        <div class="padding-top-20">
            <div class="expander-panel panel panel-default" aria-label="expander panel">
                <div class="panel-heading open" aria-label="panel heading">
                    <span class="title">Click me to toggle my state</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
                <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
                    <div>
                        <div class="panel-body">
                            <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| title | string \| React.ReactNode | — | The title to be shown in the expander header. |
| bsStyle | 'blank' \| 'default' \| 'separator' \| 'primary' \| 'secondary' \| 'info' \| 'warning' \| 'danger' \| 'success' | 'blank' | Component visual or contextual style variants. |
| iconLeft | boolean | false | Defines if the icon will be align left, otherwise it is aligned right. |
| open | boolean | false | Defines if the panel will be opened or closed by default. The open/closed state will be handled internally. |
| unmountOnExit | boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |
| onToggle | (isOpen: boolean) => void | — | Callback function for when the header is clicked and the expander toggles. |
| onEntered | VoidFunction | — | Callback fired after the component has expanded. |
| onExited | VoidFunction | — | Callback fired after the component has collapsed. |
| onAnimationStart | VoidFunction | — | Callback fired when the animation starts for either expand or collapse. |
| headerClassName | string | — | Additional classes to be set on the panel header. |
| titleClassName | string | — | Additional classes to be set on the header title. |
| bodyClassName | string | — | Additional classes to be set on the panel body. |
| iconClassName | string | — | Additional classes added to the chevron icon |
| className | string | — | Additional classes to be set on the wrapper element. |
| trackingAttributes | TrackingAttributes | — | Optional tracking attributes (e.g. from getTrackingAttributes) added to the panel header element. |
| children | React.ReactNode \| ((isOpen: boolean) => React.ReactNode \| JSX.Element) | — | Any element to be rendered inside the panel body. Providing a function enables the render prop approach. See https://reactjs.org/docs/render-props.html The function gets the isOpen state passed and is responsible for rendering the custom content. |

### Example: Default

Default Lorem ipsum
Some content
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Blank Lorem ipsum
Some content
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Separator Separator with icon left

Lorem ipsum dolor sit amet
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Separator Separator right aligned

Lorem ipsum dolor sit amet
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Primary Lorem ipsum

Primary Header with icon left

Secondary Lorem ipsum

Info Lorem ipsum

Warning Lorem ipsum

Danger Lorem ipsum

success Lorem ipsum

Dynamic table content
Item 1
Item 2
Item 3

Add new table row

#### React (tsx)

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

import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
import { dummyTextExtraShort } from '../../../utils/data';

const content = (
    <div>
        <div className='lead'>Some content</div>
        <div>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
        </div>
    </div>
);

const content2 = (
    <div>
        <div className='panel panel-default panel-body bg-lightest'>
            <div className='text-bold'>Lorem ipsum dolor sit amet</div>
            <div>
                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                erat, sed diam voluptua.
            </div>
        </div>
    </div>
);

export default () => (
    <div>
        <div className='display-grid grid-cols-1 grid-cols-2-sm grid-cols-4-lg gap-15 margin-bottom-50'>
            <div className='grid-colspan-1 grid-colspan-2-lg'>
                <label className='text-color-dark'>Default</label>
                <ExpanderPanel
                    open
                    title='Lorem ipsum'
                    bsStyle='default'
                    onEntered={() => console.log('opened')}
                    onExited={() => console.log('closed')}
                >
                    {content}
                </ExpanderPanel>
            </div>
            <div className='grid-colspan-1 grid-colspan-2-lg'>
                <label className='text-color-dark'>Blank</label>
                <ExpanderPanel open title='Lorem ipsum' bsStyle='blank'>
                    {content}
                </ExpanderPanel>
            </div>
            <div className='grid-colspan-1 grid-colspan-2-lg'>
                <label className='text-color-dark'>Separator</label>
                <ExpanderPanel
                    open
                    title='Separator with icon left'
                    iconLeft
                    bsStyle='separator'
                    bodyClassName='padding-top-5 padding-x-0'
                >
                    {isOpen => {
                        console.log(`isOpen: ${isOpen}`);
                        return content2;
                    }}
                </ExpanderPanel>
            </div>
            <div className='grid-colspan-1 grid-colspan-2-lg'>
                <label className='text-color-dark'>Separator</label>
                <ExpanderPanel
                    open
                    title='Separator right aligned'
                    bsStyle='separator'
                    bodyClassName='padding-top-5 padding-right-20'
                >
                    {isOpen => {
                        console.log(`isOpen: ${isOpen}`);
                        return content2;
                    }}
                </ExpanderPanel>
            </div>
            <div className='grid-colspan-1 grid-colspan-2-lg'>
                <label className='text-color-dark'>Primary</label>
                <ExpanderPanel title='Lorem ipsum' titleClassName='text-normal' bsStyle='primary'>
                    {isOpen => {
                        console.log(`isOpen: ${isOpen}`);
                        return content2;
                    }}
                </ExpanderPanel>
            </div>
            <div className='grid-colspan-1 grid-colspan-2-lg'>
                <label className='text-color-dark'>Primary</label>
                <ExpanderPanel title='Header with icon left' titleClassName='text-normal' iconLeft bsStyle='primary'>
                    {isOpen => {
                        console.log(`isOpen: ${isOpen}`);
                        return content2;
                    }}
                </ExpanderPanel>
            </div>
            <div>
                <label className='text-color-dark'>Secondary</label>
                <ExpanderPanel title='Lorem ipsum' bsStyle='secondary'>
                    {dummyTextExtraShort}
                </ExpanderPanel>
            </div>
            <div>
                <label className='text-color-dark'>Info</label>
                <ExpanderPanel title='Lorem ipsum' bsStyle='info'>
                    {dummyTextExtraShort}
                </ExpanderPanel>
            </div>
            <div>
                <label className='text-color-dark'>Warning</label>
                <ExpanderPanel title='Lorem ipsum' bsStyle='warning'>
                    {dummyTextExtraShort}
                </ExpanderPanel>
            </div>
            <div>
                <label className='text-color-dark'>Danger</label>
                <ExpanderPanel title='Lorem ipsum' bsStyle='danger'>
                    {dummyTextExtraShort}
                </ExpanderPanel>
            </div>
            <div>
                <label className='text-color-dark'>success</label>
                <ExpanderPanel title='Lorem ipsum' bsStyle='success'>
                    {dummyTextExtraShort}
                </ExpanderPanel>
            </div>
        </div>
        <ExpanderPanel
            title='Dynamic table content'
            bsStyle='default'
            titleClassName='text-bold'
            bodyClassName='padding-0'
            open
        >
            <DynamicContent />
        </ExpanderPanel>
    </div>
);

const DynamicContent = () => {
    const [listItems, setListItems] = useState([
        {
            id: 1,
            content: 'Item 1',
        },
        {
            id: 2,
            content: 'Item 2',
        },
        {
            id: 3,
            content: 'Item 3',
        },
    ]);

    const handleAddItem = () => {
        const lastItem = listItems[listItems.length - 1];
        const newId = lastItem ? lastItem.id + 1 : 1;
        const newItem = { id: newId, content: `Item ${newId}` };

        setListItems([...listItems, newItem]);
    };

    const handleRemoveItem = (event: React.MouseEvent<HTMLButtonElement>) => {
        const idString = event.currentTarget.getAttribute('data-id');
        if (idString) {
            const id = Number.parseInt(idString, 10);
            if (!Number.isNaN(id)) {
                setListItems(listItems.filter(item => item.id !== id));
            }
        }
    };

    return (
        <div>
            <table className='table margin-0 border border-bottom-only border-color-lighter'>
                <colgroup>
                    <col className='width-100pct' />
                </colgroup>
                <tbody>
                    {listItems.map(item => (
                        <tr key={item.id}>
                            <td>{item.content}</td>
                            <td>
                                <button
                                    data-id={item.id}
                                    type='button'
                                    className='btn btn-xs btn-muted btn-icon-only'
                                    onClick={handleRemoveItem}
                                >
                                    <span className='rioglyph rioglyph-remove' />
                                </button>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
            <div key='addNew' className='padding-25 text-center'>
                <button type='button' className='btn btn-default' onClick={handleAddItem}>
                    <span className='rioglyph rioglyph-plus' />
                    <span>Add new table row</span>
                </button>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <div class="display-grid grid-cols-1 grid-cols-2-sm grid-cols-4-lg gap-15 margin-bottom-50">
        <div class="grid-colspan-1 grid-colspan-2-lg">
            <label class="text-color-dark">Default</label>
            <div class="expander-panel panel panel-default" aria-label="expander panel">
                <div class="panel-heading open" aria-label="panel heading">
                    <span class="title">Lorem ipsum</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
                <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
                    <div>
                        <div class="panel-body">
                            <div>
                                <div class="lead">Some content</div>
                                <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid-colspan-1 grid-colspan-2-lg">
            <label class="text-color-dark">Blank</label>
            <div class="expander-panel panel panel-blank" aria-label="expander panel">
                <div class="panel-heading open" aria-label="panel heading">
                    <span class="title">Lorem ipsum</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
                <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
                    <div>
                        <div class="panel-body">
                            <div>
                                <div class="lead">Some content</div>
                                <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid-colspan-1 grid-colspan-2-lg">
            <label class="text-color-dark">Separator</label>
            <div class="expander-panel panel panel-separator" aria-label="expander panel">
                <div class="panel-heading open icon-left" aria-label="panel heading">
                    <span class="title">Separator with icon left</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                    <div class="separator">
                        <hr>
                    </div>
                </div>
                <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
                    <div>
                        <div class="panel-body padding-top-5 padding-x-0">
                            <div>
                                <div class="panel panel-default panel-body bg-lightest">
                                    <div class="text-bold">Lorem ipsum dolor sit amet</div>
                                    <div>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid-colspan-1 grid-colspan-2-lg">
            <label class="text-color-dark">Separator</label>
            <div class="expander-panel panel panel-separator" aria-label="expander panel">
                <div class="panel-heading open" aria-label="panel heading">
                    <span class="title">Separator right aligned</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                    <div class="separator">
                        <hr>
                    </div>
                </div>
                <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
                    <div>
                        <div class="panel-body padding-top-5 padding-right-20">
                            <div>
                                <div class="panel panel-default panel-body bg-lightest">
                                    <div class="text-bold">Lorem ipsum dolor sit amet</div>
                                    <div>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid-colspan-1 grid-colspan-2-lg">
            <label class="text-color-dark">Primary</label>
            <div class="expander-panel panel panel-primary" aria-label="expander panel">
                <div class="panel-heading" aria-label="panel heading">
                    <span class="title text-normal">Lorem ipsum</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
            </div>
        </div>
        <div class="grid-colspan-1 grid-colspan-2-lg">
            <label class="text-color-dark">Primary</label>
            <div class="expander-panel panel panel-primary" aria-label="expander panel">
                <div class="panel-heading icon-left" aria-label="panel heading">
                    <span class="title text-normal">Header with icon left</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
            </div>
        </div>
        <div>
            <label class="text-color-dark">Secondary</label>
            <div class="expander-panel panel panel-secondary" aria-label="expander panel">
                <div class="panel-heading" aria-label="panel heading">
                    <span class="title">Lorem ipsum</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
            </div>
        </div>
        <div>
            <label class="text-color-dark">Info</label>
            <div class="expander-panel panel panel-info" aria-label="expander panel">
                <div class="panel-heading" aria-label="panel heading">
                    <span class="title">Lorem ipsum</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
            </div>
        </div>
        <div>
            <label class="text-color-dark">Warning</label>
            <div class="expander-panel panel panel-warning" aria-label="expander panel">
                <div class="panel-heading" aria-label="panel heading">
                    <span class="title">Lorem ipsum</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
            </div>
        </div>
        <div>
            <label class="text-color-dark">Danger</label>
            <div class="expander-panel panel panel-danger" aria-label="expander panel">
                <div class="panel-heading" aria-label="panel heading">
                    <span class="title">Lorem ipsum</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
            </div>
        </div>
        <div>
            <label class="text-color-dark">success</label>
            <div class="expander-panel panel panel-success" aria-label="expander panel">
                <div class="panel-heading" aria-label="panel heading">
                    <span class="title">Lorem ipsum</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="expander-panel panel panel-default" aria-label="expander panel">
        <div class="panel-heading open" aria-label="panel heading">
            <span class="title text-bold">Dynamic table content</span>
            <span class="expander-icon rioglyph rioglyph-chevron-down">
            </span>
        </div>
        <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
            <div>
                <div class="panel-body padding-0">
                    <div>
                        <table class="table margin-0 border border-bottom-only border-color-lighter">
                            <colgroup>
                                <col class="width-100pct">
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>Item 1</td>
                                    <td>
                                        <button data-id="1" type="button" class="btn btn-xs btn-muted btn-icon-only">
                                            <span class="rioglyph rioglyph-remove">
                                            </span>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Item 2</td>
                                    <td>
                                        <button data-id="2" type="button" class="btn btn-xs btn-muted btn-icon-only">
                                            <span class="rioglyph rioglyph-remove">
                                            </span>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Item 3</td>
                                    <td>
                                        <button data-id="3" type="button" class="btn btn-xs btn-muted btn-icon-only">
                                            <span class="rioglyph rioglyph-remove">
                                            </span>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="padding-25 text-center">
                            <button type="button" class="btn btn-default">
                                <span class="rioglyph rioglyph-plus">
                                </span>
                                <span>Add new table row</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| title | string \| React.ReactNode | — | The title to be shown in the expander header. |
| bsStyle | 'blank' \| 'default' \| 'separator' \| 'primary' \| 'secondary' \| 'info' \| 'warning' \| 'danger' \| 'success' | 'blank' | Component visual or contextual style variants. |
| iconLeft | boolean | false | Defines if the icon will be align left, otherwise it is aligned right. |
| open | boolean | false | Defines if the panel will be opened or closed by default. The open/closed state will be handled internally. |
| unmountOnExit | boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |
| onToggle | (isOpen: boolean) => void | — | Callback function for when the header is clicked and the expander toggles. |
| onEntered | VoidFunction | — | Callback fired after the component has expanded. |
| onExited | VoidFunction | — | Callback fired after the component has collapsed. |
| onAnimationStart | VoidFunction | — | Callback fired when the animation starts for either expand or collapse. |
| headerClassName | string | — | Additional classes to be set on the panel header. |
| titleClassName | string | — | Additional classes to be set on the header title. |
| bodyClassName | string | — | Additional classes to be set on the panel body. |
| iconClassName | string | — | Additional classes added to the chevron icon |
| className | string | — | Additional classes to be set on the wrapper element. |
| trackingAttributes | TrackingAttributes | — | Optional tracking attributes (e.g. from getTrackingAttributes) added to the panel header element. |
| children | React.ReactNode \| ((isOpen: boolean) => React.ReactNode \| JSX.Element) | — | Any element to be rendered inside the panel body. Providing a function enables the render prop approach. See https://reactjs.org/docs/render-props.html The function gets the isOpen state passed and is responsible for rendering the custom content. |

## ExpanderList

A simple list component based on the "list-group" where items can be expanded individually.

### Example: With custom classes for header and body

Click me
Some content
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Click me

Click me

With custom classes for header and body

Grid column 1
Grid column 2
Grid column 3

Click me 42

Click me

Not expandable since there is no body Toggle first

#### React (tsx)

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

import ExpanderList from '@rio-cloud/rio-uikit/ExpanderList';
import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
import Button from '@rio-cloud/rio-uikit/Button';

const content = (
    <div>
        <div className='lead'>Some content</div>
        <div>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
        </div>
    </div>
);

export default () => {
    const [listItems, setListItems] = useState([
        {
            id: 1,
            header: 'Click me',
            body: content,
            open: true,
            onOpen: () => console.log('open'),
            onClose: () => console.log('close'),
        },
        {
            id: 2,
            header: <span>Click me</span>,
            body: content,
            className: 'list-group-item-warning',
        },
        {
            id: 3,
            header: <span>Click me</span>,
            body: content,
            className: 'list-group-item-danger',
        },
        {
            id: 4,
            header: <span>With custom classes for header and body</span>,
            body: (
                <div>
                    <div>{content}</div>
                    <div className='btn-toolbar margin-top-15'>
                        <Button onClick={() => removeItem(4)}>Delete me</Button>
                        <Button onClick={() => updateItem(4)}>Update Item Headline</Button>
                    </div>
                </div>
            ),
            className: 'foobar',
            headerClassName: 'text-color-dark',
            bodyClassName: 'bg-lightest padding-25',
        },
        {
            id: 5,
            header: (
                <div className='display-grid grid-cols-3'>
                    <div className=''>Grid column 1</div>
                    <div className=''>Grid column 2</div>
                    <div className=''>Grid column 3</div>
                </div>
            ),
            body: content,
        },
        {
            id: 6,
            header: (
                <span>
                    <span>Click me</span>
                    <span className='badge margin-left-5'>42</span>
                </span>
            ),
            body: content,
        },
        {
            id: 7,
            header: (
                <span>
                    <span className='rioglyph rioglyph-tasks margin-right-3' aria-hidden='true' />
                    <span>Click me</span>
                </span>
            ),
            body: (
                <ExpanderPanel bsStyle='default' className='margin-0' title='Please click me' iconLeft>
                    {content}
                </ExpanderPanel>
            ),
        },
        {
            id: 8,
            header: 'Not expandable since there is no body',
        },
    ]);

    const handleToggleFirst = () => {
        const updatedItems = [...listItems];
        const itemToUpdate = updatedItems[0];
        itemToUpdate.open = !itemToUpdate.open;

        setListItems(updatedItems);
    };

    const updateItem = (itemId: number) => {
        const updatedItems = [...listItems];
        const itemToUpdate = updatedItems.find(item => item.id === itemId);

        if (itemToUpdate) {
            itemToUpdate.header = 'Headline updated';
            setListItems(updatedItems);
        }
    };

    const removeItem = (itemId: number) => {
        setListItems(listItems.filter(item => item.id !== itemId));
    };

    return (
        <div>
            <ExpanderList items={listItems} className='margin-bottom-20' />
            <Button onClick={handleToggleFirst}>Toggle first</Button>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <ul class="expander-list list-group rounded border margin-bottom-20">
        <li class="list-group-item expandable open">
            <div class="expander-list-header" aria-label="expander item header">
                <span class="expander-list-header-content">Click me</span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
            <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
                <div class="expander-list-body-wrapper">
                    <div class="expander-list-body" aria-label="expander item body">
                        <div>
                            <div class="lead">Some content</div>
                            <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="list-group-item list-group-item-warning expandable">
            <div class="expander-list-header" aria-label="expander item header">
                <span class="expander-list-header-content">
                    <span>Click me</span>
                </span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
        </li>
        <li class="list-group-item list-group-item-danger expandable">
            <div class="expander-list-header" aria-label="expander item header">
                <span class="expander-list-header-content">
                    <span>Click me</span>
                </span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
        </li>
        <li class="list-group-item foobar expandable">
            <div class="expander-list-header text-color-dark" aria-label="expander item header">
                <span class="expander-list-header-content">
                    <span>With custom classes for header and body</span>
                </span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
        </li>
        <li class="list-group-item expandable">
            <div class="expander-list-header" aria-label="expander item header">
                <span class="expander-list-header-content">
                    <div class="display-grid grid-cols-3">
                        <div class="">Grid column 1</div>
                        <div class="">Grid column 2</div>
                        <div class="">Grid column 3</div>
                    </div>
                </span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
        </li>
        <li class="list-group-item expandable">
            <div class="expander-list-header" aria-label="expander item header">
                <span class="expander-list-header-content">
                    <span>
                        <span>Click me</span>
                        <span class="badge margin-left-5">42</span>
                    </span>
                </span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
        </li>
        <li class="list-group-item expandable">
            <div class="expander-list-header" aria-label="expander item header">
                <span class="expander-list-header-content">
                    <span>
                        <span class="rioglyph rioglyph-tasks margin-right-3" aria-hidden="true">
                        </span>
                        <span>Click me</span>
                    </span>
                </span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
        </li>
        <li class="list-group-item">
            <div class="expander-list-header" aria-label="expander item header">
                <span class="expander-list-header-content">Not expandable since there is no body</span>
            </div>
        </li>
    </ul>
    <button type="button" class="btn btn-default btn-component" tabindex="0">Toggle first</button>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| items | ExpanderListItem[] | — | List of items to be rendered. The expanded state can be defined via the items open prop. |
| └id | string \| number | — | The "id" property is used to know which item is expanded. It will also be used to control the component from the outside. It can be a number or a string. If there is no "id" provided, a unique id is internally generated which will be used internally for the uncontrolled case.' |
| └header | string \| React.ReactNode | — | The header content. |
| └body | string \| React.ReactNode | — | The body content. If there is no "body" provided, the list item is not expandable. |
| └open | boolean | — | Defines if the item will be expanded or closed by default. |
| └onOpen | VoidFunction | — | Callback fired when item toggles to open after a click. |
| └onClose | VoidFunction | — | Callback fired when item toggles to close after a click. |
| └headerClassName | string | — | Additional classes to be set on "expander-list-header" node. |
| └bodyClassName | string | — | Additional classes to be set on "expander-list-body" node. |
| └className | string | — | Additional classes to be set on list item node. |
| └trackingAttributes | TrackingAttributes | — | Optional tracking attributes (e.g. from getTrackingAttributes) added to the item header element. |
| rounded | boolean | true | Defines whether the "expander-list-body" is rounded or not. |
| bordered | boolean | true | Defines whether the "expander-list-body" has a border or not. |
| unmountOnExit | boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |
| className | string | — | Additional classes to be set on the unordered list itself. |