Collapsible Div in Dash?

Dash Python
1

Is it possible to have a collapsible html Div in dash? I’ve tried but I get a SyntaxError when assigning the html class:

SyntaxError: invalid syntax
File “/xxx/dash.py”, line 18
html.Div([html.Button(‘Click me!!!’,type=“button”, class=“btn btn-info”)]),
^

2

You need to use className instead of class, as class is a Python reserved keyword, which is why you’re getting the error :slight_smile:

1 Like
3

Also (unrelated to your syntax error), if you are looking for collapsible divs, see Show/hide radio and form elements in a menu - #4 by chriddyp

4

Thanks! (and sorry about the rookie error). I still haven’t mastered the collapsible div the HTML way but can get the functionality I need from your suggestions.

Here is my proof of concept for three show/hide options (re-hashed from existing examples): RaioItems, Button and HTML-summary:

app.layout = html.Div([
    # Radio
    dcc.RadioItems(
        id='toggle',
        options=[{'label': i, 'value': i} for i in ['Show', 'Hide']],
        value='Show'
    ),
    html.Div(id='radio_container', children=[
        html.P('Peekaboo'),
    ]),
    html.P("###############################"),

    # Button
    html.Button('Show / Hide', id='button'),
    html.Div(id='button_container', children=[
        html.P('Peekaboo'),
    ]),
    html.P("###############################"),

    #html details
    html.Details([
        html.Summary('Show / Hide'),
        html.Div('Peekaboo'),
    ]),

])

@app.callback(Output('radio_container', 'style'), [Input('toggle', 'value')])
def radio_toggle(toggle_value):
    if toggle_value == 'Show':
        return {'display': 'block'}
    else:
        return {'display': 'none'}

@app.callback(
    dash.dependencies.Output('button_container', 'style'),
    [dash.dependencies.Input('button', 'n_clicks')],
    )
def button_toggle(n_clicks):
    if n_clicks % 2 == 1:
        return {'display': 'none'}
    else:
        return {'display': 'block'}
4 Likes
5

I think using a simple html.Details will work out fine.

Like this:
html.Details([
html.Summary(‘Parameters Tab(Click To Show!!!)’),
html.Div([
html.Table(id=‘Tab-keeper’,),
])
],className=‘row’,style={‘position’:‘fixed’,‘right’:‘0’,‘top’:‘0’,‘float’:‘right’,
‘color’:’#ffffff’,‘background-color’:’#001625’},),

6

it saved me …phew!!! :slight_smile: thank you

7

You could also now use the Collapse component from dash-bootstrap-components (which didn’t exist when this thread was started).