Hi @MaayanShoshan
The dcc.Location is for multi-page apps. If you are using tabs, you can set which tab and accordion panel are active in a callback. This example uses a button to trigger the callback.
Note that you need sync the active tab, because it can be updated by either the button, or clicking on a tab. This is done by including the “value” of the tab as both an Input and an Output in the same callback.
import dash_mantine_components as dmc
from dash import Dash, Input, Output, html, callback, ctx
app = Dash(__name__, suppress_callback_exceptions=True)
tabs = html.Div(
[
dmc.Tabs(
[
dmc.TabsList(
[
dmc.Tab("Tab one", value="1"),
dmc.Tab("Tab two", value="2"),
]
),
],
id="tabs-example",
value="1",
),
html.Div(id="tabs-content", style={"paddingTop": 10}),
]
)
def make_accordion(value="panel-1"):
return dmc.Accordion(
children=[
dmc.AccordionItem(
[
dmc.AccordionControl("panel 1"),
dmc.AccordionPanel("Panel 1 content"),
],
value="panel-1",
),
dmc.AccordionItem(
[
dmc.AccordionControl("panel 2"),
dmc.AccordionPanel("Panel 2 content"),
],
value="panel-2",
),
],
value=value,
id="accordion-example",
)
button = dmc.Button("go to tab2 panel2", id="button")
app.layout = dmc.Container(
[
button,
tabs,
]
)
@callback(
Output("tabs-content", "children"),
Output("tabs-example", "value"),
Input("tabs-example", "value"),
Input("button", "n_clicks"),
prevent_initial_call=True,
)
def render_content(active, n):
if ctx.triggered_id == "button":
accordion = make_accordion("panel-2")
active = "2"
else:
accordion = make_accordion()
if active == "1":
return [dmc.Text("Tab One selected")], active
else:
return [dmc.Text("Tab Two selected"), accordion], active
if __name__ == "__main__":
app.run_server(debug=True)