Adding hyperlinks in my dashboard from one tab to another tab, into a specific location

Dash Python
1

Hi there,
I am building a dashboard with multiple tabs and I want to add hyperlinks from one tab to the other in a specific place.
The issue is that the second tab contains accordion and I want the link to go to a specific accordion item.
So for example:
if I press ‘A’ link in one tab, it will lead me to the accordion item ‘A’ in other tab.
I read about dcc.Location but I’m not sure how can I use it.

Any ideas?

2

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)
1 Like
3

Thanks for the detailed response!
it indeed give me what I want.
Is there any way that after clicking the button, the exact location of the accordion item will appear?
So for example if I want the last accordion item, the user don’t need to scroll down.
I imagined it like a pointer