How to transition from one box to another with a link and return

Dash Python
1

I made a small Dash dashboard for trying some concepts and I’m glad with this tool, so I write this topic because I have a doubt. I want to change the layout of a box or a modal in the following way, with a link:

image
image1108×541 20.6 KB
to
image
image1108×163 21.3 KB

For clarification: Original card with a line plot → Help link → the card changes to another card with the help contents → Back link → the card changes again, this time to the original card.

I have the following code (the link for data is available there):

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import plotly
import pandas as pd
from dash.dependencies import Input, Output, State
import plotly.express as px
import os
from flask import send_from_directory, session, copy_current_request_context

# parameters
data_folder = '...'
data = pd.read_csv(data_folder + 'demografia.csv')

# graphs
### population
df = data.iloc[:,[0,1]]
fig = px.line(df, x="Año", y="Población")

# Cards
cardy =     dbc.Card([
                dbc.CardHeader(
                    dbc.Row([
                        dbc.Col([html.Strong(f'Population ({df.iloc[0,0]}-{df.iloc[-1,0]})')], width=11),
                        dbc.Col([html.A(['Help'], href='#help', id='help')], width=1)
                        ])
                    ),
                dbc.CardBody(dcc.Graph(figure=fig))
            ], id="cardy")

ayuda =     dbc.Card([
                dbc.CardHeader(
                    dbc.Row([
                        dbc.Col([html.Strong('Help')], width=11),
                        dbc.Col([html.A(['Back'], href='#help', id='back')], width=1)
                        ])
                    ),
                dbc.CardBody('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.')
            ], id="helpy")

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
body = html.Div([
    dcc.Location(id='home', pathname='/app', refresh=False),
    dbc.Container([
    html.Link(
        rel='stylesheet',
        href='/assets/style.css'
    ),
    html.Header([
        "Demography of Spain"
    ])
    , dbc.Row(
        dbc.Col([
                cardy,
                ayuda
        ])
            )
    , dbc.Row([
            dbc.Col(html.Div(dbc.Alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", color="primary")))
            , dbc.Col(html.Div(dbc.Alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", color="primary")))
            ])
        ])
    ])
app.layout = html.Div([body])

@app.server.route('/static/<path:path>')
def static_file(path):
    static_folder = os.path.join(os.getcwd(), 'static')
    return send_from_directory(static_folder, path)


@app.callback(
    Output("helpy", "children"),
    [Input("help", "n_clicks"), Input("back", "n_clicks")],
    [State("helpy", "children")],
)
def toogle(box):
    return box

if __name__ == "__main__":
    app.run_server(debug = True)

What would be the proper callback for the aforementioned action? I tried to find similar posts in Internet, but I had not luck.

Thanks.