I have the following code:
app.layout = html.Div(
[
html.Details(
id = "my_details",
children = [
html.Summary(
html.A(id='outer_link', children=['Expand for details']),
),
html.Div(
id = "inner_div",
style={'text-indent':'2em'},
children = []
)
]
)
]
)
@app.callback(
Output("inner_div", "children"),
Input(component_id="outer_link", component_property="n_clicks"),
prevent_initial_call=True
)
def on_details_opened_or_closed(n_clicks):
return html.Pre("Hello, World!")
app.run_server(debug=True)
Notice that when the link in the html.Details summary is clicked, the callback function places some text in the “children” of the html.Details. The above code works, but it’s not the exact functionality I want. If I click on the “marker” (the little arrow thing) which is part of the Details element - to “open” the details - that is different from clicking on the link which is in the Details summary.
I want to be able to modify the children of the Details element any time the marker is clicked - essentially any time the Details element changes from an open state to a closed state, or vice versa.
I tried doing the following:
@app.callback(
Output("inner_div", "children"),
Input(component_id="my_details", component_property="open"),
prevent_initial_call=True
)
def on_details_opened_or_closed(open):
return html.Pre("Hello, World!")
But that did not work. Any suggestions on how I can do this?
If you are curious why I want to do this, you may take a look at this thread from a week or two ago: Having trouble with pattern matching callbacks in Dash
Thanks for any help you can give!