ui.accordion

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

Create a vertically collapsing accordion.

Parameters

*args: AccordionPanel | TagAttrs = ()

AccordionPanel objects returned from accordion_panel. Or tag attributes that are supplied to the returned Tag object.

id: Optional[str] = None

If provided, you can use input.id() 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.

Returns

Type Description
Tag Accordion panel Tag object.

References

Bootstrap Accordion

See Also

Examples

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

## file: app.py
from shiny import App, Inputs, Outputs, Session, render, ui


def make_items():
    return [
        ui.accordion_panel(f"Section {letter}", f"Some narrative for section {letter}")
        for letter in "ABCDE"
    ]


# # First shown by default
# ui.accordion(*make_items())

# # Nothing shown by default
# ui.accordion(*make_items(), open=False)
# # Everything shown by default
# ui.accordion(*make_items(), open=True)

# # Show particular sections
# ui.accordion(*make_items(), open="Section B")
# ui.accordion(*make_items(), open=["Section A", "Section B"])


app_ui = ui.page_fluid(
    ui.markdown("#### Accordion: (`multiple=False`)"),
    # Provide an id to create a shiny input binding
    ui.accordion(*make_items(), id="acc_single", multiple=False),
    ui.output_text_verbatim("acc_single_val", placeholder=True),
    ui.tags.br(),
    ui.markdown("#### Accordion: (`multiple=True`)"),
    ui.accordion(*make_items(), id="acc_multiple"),
    ui.output_text_verbatim("acc_multiple_val", placeholder=True),
)


def server(input: Inputs, output: Outputs, session: Session):
    @render.text
    def acc_single_val():
        return "input.acc_single(): " + str(input.acc_single())

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


app = App(app_ui, server)