## Collapse  
Use the Collapse component to animate presence with slide down/up transition  
Category: Miscellaneous  

### Simple Example


```python
from dash import callback, Input, Output
import dash_mantine_components as dmc

component = dmc.Box([
    dmc.Button("Toggle Content", id="collapse-btn", n_clicks=0),
    dmc.Collapse(
        children=dmc.Text("Hello World!", my="lg"),
        opened=False,
        id="collapse-simple"
    )
])

@callback(
    Output("collapse-simple", "opened"),
    Input("collapse-btn", "n_clicks"),
)
def update(n):
    if n % 2 == 0:
        return False
    return True
```
### Change transition
Set following props to control transition:

- `transitionDuration` – duration in ms
- `transitionTimingFunction` – [CSS timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) ("ease", "linear", etc.), defaults to "ease"

```python
from dash import callback, Input, Output
import dash_mantine_components as dmc

component = dmc.Box([
    dmc.Button("Toggle Content", id="collapse-transition-btn", n_clicks=0),
    dmc.Collapse(
        children=dmc.Text("Hello World!", my="lg"),
        opened=False,
        transitionDuration=1000,
        transitionTimingFunction="linear",
        id="collapse-transition"
    )
])

@callback(
    Output("collapse-transition", "opened"),
    Input("collapse-transition-btn", "n_clicks"),
)
def update(n):
    if n % 2 == 0:
        return False
    return True
```
### Nested Collapse components

```python
from dash import callback, Input, Output
import dash_mantine_components as dmc

component = dmc.Box([
    dmc.Button("Toggle Content", id="collapse-root-btn", n_clicks=0, mb="sm", size="lg"),
    dmc.Collapse(
        children=dmc.Box([
            dmc.Text("Hello World!", mt="lg"),
            dmc.Button(
                "Toggle Content",
                id="collapse-inner-btn",
                n_clicks=0,
                variant="outline",
                size="sm",
                my="lg",
                ml="lg"
            ),
            dmc.Collapse(children= dmc.Text("Hello Nested Worlds!", ml="lg"), id="collapse-inner")
        ]),
        opened=False,
        id="collapse-root"
    )
])

@callback(
    Output("collapse-root", "opened"),
    Input("collapse-root-btn", "n_clicks"),
)
def update(n):
    if n % 2 == 0:
        return False
    return True


@callback(
    Output("collapse-inner", "opened"),
    Input("collapse-inner-btn", "n_clicks"),
)
def update(n):
    if n % 2 == 0:
        return False
    return True
```
### Keyword Arguments
#### Collapse

- children (a list of or a singular dash component, string or number; optional):
    Content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- animateOpacity (boolean; optional):
    Determines whether opacity should be animated, `True` by default.

- aria-* (string; optional):
    Wild card aria attributes.

- className (string; optional):
    Class added to the root element, if applicable.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- keepMounted (boolean; optional):
    Keep element in DOM when collapsed, useful for nested collapses.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- opened (boolean; default False):
    Opened state.

- tabIndex (number; optional):
    tab-index.

- transitionDuration (number; optional):
    Transition duration in ms, `200` by default.

- transitionTimingFunction (string; optional):
    Transition timing function, default value is `ease`.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.