Hello,
I am using html.Details to create collapsible panels in Dash. I have a few panels, and when I expand one panel, would like all other panels to collapse.
I am able to set the status of the panel through ‘open’= True while defining the panels. I however am not able to get the callback to to trigger, when a panel is expanded. Below is the callback:
@app.callback(Output(‘plot_styling’, ‘open’),
[Input(‘plot_labels’, ‘open’),
Input(‘plot_sizing’, ‘open’),
Input(‘axes_settings’, ‘open’)])
def Plot_styling_collapse(value1, value2, value3):
if value1 or value2 or value3:
return False
I had defined the panels as below:
html.Details(open=True, id=‘plot_styling’, children=[…], style={‘marginBottom’: 5, ‘marginTop’: 5, ‘border-style’: ‘solid’, ‘border-width’: ‘1px’,
‘padding’: ‘10px 5px’}),html.Details(open=False, id=‘plot_labels’, children=[…],
style={‘marginBottom’: 5, ‘marginTop’: 5, ‘border-style’: ‘solid’, ‘border-width’: ‘1px’,
‘padding’: ‘10px 5px’}),html.Details(open=False, id=‘plot_sizing’, children=[…],
style={‘marginBottom’: 5, ‘marginTop’: 5, ‘border-style’: ‘solid’, ‘border-width’: ‘1px’,
‘padding’: ‘10px 5px’}),