express.ui.accordion(id=None, open=None, multiple=True, class_=None, width=None, height=None, **kwargs)

Context manager for a vertically collapsing accordion.

This function wraps accordion.


id: Optional[str] = None

If provided, you can use in your server logic to determine which of the accordion_panels are currently active. The value will correspond to the accordion_panel’s value argument.

open: Optional[bool | str | list[str]] = None

A list of accordion_panel values to open (i.e., show) by default. The default value of None will open the first accordion_panel. Use a value of True to open all (or False to open none) of the items. It’s only possible to open more than one panel when multiple=True.

multiple: bool = True

Whether multiple accordion_panel can be open at once.

class_: Optional[str] = None

Additional CSS classes to include on the accordion div.

width: Optional[CssUnit] = None

Any valid CSS unit; for example, height=“100%”.

height: Optional[CssUnit] = None

Any valid CSS unit; for example, height=“100%”.

**kwargs: TagAttrValue = {}

Attributes to this tag.


#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file:
from import expressify, input, render, ui

def my_accordion(**kwargs):
    with ui.accordion(**kwargs):
        for letter in "ABCDE":
            with ui.accordion_panel(f"Section {letter}"):
                f"Some narrative for section {letter}"

ui.markdown("#### Single-select accordion")

my_accordion(multiple=False, id="acc_single")

def acc_single_val():
    return "input.acc_single(): " + str(input.acc_single())

ui.markdown("#### Multi-select accordion")

my_accordion(multiple=True, id="acc_multiple")

def acc_multiple_val():
    return "input.acc_multiple(): " + str(input.acc_multiple())