Accordion

A collection of expandable and collapsible disclosure elements

Example

from deephaven import ui

my_accordion_basic = ui.accordion(
    ui.disclosure(title="FAQ #1", panel="Answer"),
    ui.disclosure(title="FAQ #2", panel="Answer"),
)

Accordion Basic Example

Events

Accordion accepts an on_expanded_change prop which triggers when a disclosure element is expanded or collapsed.

Single-Expanded (default)

from deephaven import ui


@ui.component
def ui_accordion_event():
    expanded_keys, set_expanded_keys = ui.use_state([])

    return ui.view(
        ui.accordion(
            ui.disclosure(
                id="which-core-version",
                title="How can I find which Core version to which a particular feature or fix was added?",
                panel="At the bottom of a Deephaven Community Core commit message you can see branches and tags containing that particular change. You can browse commits in the deephaven-core GitHub repository. Click on any title for details.",
            ),
            ui.disclosure(
                id="docker-compose-required",
                title="Is docker compose required to run deephaven?",
                panel="No. You can run Deephaven via Docker without compose. See here for an example. Docker compose does make customizing your deployment easier, though, so we recommend it for users who want to do that.",
            ),
            expanded_keys=expanded_keys,
            on_expanded_change=set_expanded_keys,
        ),
        ui.heading("Currently expanded: ", expanded_keys, margin_top="20px"),
    )


my_accordion_event = ui_accordion_event()

Multiple-Expanded

from deephaven import ui


@ui.component
def ui_accordion_event():
    expanded_keys, set_expanded_keys = ui.use_state([])

    return ui.view(
        ui.accordion(
            ui.disclosure(
                id="which-core-version",
                title="How can I find which Core version to which a particular feature or fix was added?",
                panel="At the bottom of a Deephaven Community Core commit message you can see branches and tags containing that particular change. You can browse commits in the deephaven-core GitHub repository. Click on any title for details.",
            ),
            ui.disclosure(
                id="docker-compose-required",
                title="Is docker compose required to run deephaven?",
                panel="No. You can run Deephaven via Docker without compose. See here for an example. Docker compose does make customizing your deployment easier, though, so we recommend it for users who want to do that.",
            ),
            ui.disclosure(
                id="reset-python-kernel",
                title="Can I reset the Python kernel without restarting the Deephaven Docker container?",
                panel="At this time, there is no way to restart the Python kernel without restarting Docker as well.",
            ),
            expanded_keys=expanded_keys,
            on_expanded_change=set_expanded_keys,
            allows_multiple_expanded=True,
        ),
        ui.heading("Currently expanded: ", ", ".join(expanded_keys), margin_top="20px"),
    )


my_accordion_event = ui_accordion_event()

Disabled state

from deephaven import ui

my_accordion_disabled = ui.accordion(
    ui.disclosure(title="FAQ #1", panel="Answer"),
    ui.disclosure(title="FAQ #2", panel="Answer"),
    is_disabled=True,
)

Quiet State

from deephaven import ui

my_accordion_quiet = ui.accordion(
    ui.disclosure(title="FAQ #1", panel="Answer"),
    ui.disclosure(title="FAQ #2", panel="Answer"),
    is_quiet=True,
)