Expand all Accordion elements by default

Dash Python
1

I would like to use an Accordion that starts out with all accordion elements not collapsed.

Both the fabulous Dash Bootstrab Components and beautiful Dash Mantine Components have their respective accordions dbc.Accordion and dmc.Accordion. The latter describes itself as a component that lets you:

Divide content into collapsible sections.

But how do you start your session with all sections not collapsed?

Some details:

By default, (dbc.Accordion) starts out with the first item uncollapsed. There’s also an attribute start_collapsed=True that lets you collapse all items from the get go. I can’t for the life of me figure out how to do the same thing for the dmc.Accordion. Or, as a best case scenario, start out with all items uncollapsed or be able to specify which are collapsed and which are not.

Any suggestions out there?

2

Hi @vestland

Try using the value prop in dmc.AccordionMultiple(). It takes a list of strings of the value of the AccordionItem() components that should be open.

In this example all are open.


from dash import Dash, html,
import dash_mantine_components as dmc

app = Dash(__name__)



accordion = dmc.AccordionMultiple(
    children=[
        dmc.AccordionItem(
            [
                dmc.AccordionControl("Customization"),
                dmc.AccordionPanel(
                    "Colors, fonts, shadows and many other parts are customizable to fit your design needs"
                ),
            ],
            value="customization",
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl("Flexibility"),
                dmc.AccordionPanel(
                    "Configure temp appearance and behavior with vast amount of settings or overwrite any part of "
                    "component styles "
                ),
            ],
            value="flexibility",
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl("No annoying focus ring"),
                dmc.AccordionPanel(
                    "With new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard"
                ),
            ],
            value="focus",
        ),
    ],
    value=["customization", "flexibility", "focus"]
)

app.layout = html.Div([accordion])

if __name__ == '__main__':
    app.run(debug=True)
1 Like
3

Perfect! Thank you so much!

2 Likes