CODEWITHSUNDEEP
pythonplotly-dash
Zephyr
Zephyr

Reputation: 12496

Plotly Dash: dash_bootstrap_components.Collapse does not collapse

I am trying to implement a dash_bootstrap_components.Collapse in my dash app, but there is an issue with its behavior. Here the code, I do not wrote it on my own, I simply copied it from the dash_bootstrap_components.Collapse documentation:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div([dbc.Button('Open collapse',
                                  id = 'collapse-button',
                                  className = 'mb-3',
                                  color = 'primary'),
                       dbc.Collapse(dbc.Card(dbc.CardBody('This content is hidden in the collapse')),
                                    id = 'collapse')])


@app.callback(Output('collapse', 'is_open'),
              [Input('collapse-button', 'n_clicks')],
              [State('collapse', 'is_open')])
def toggle_collapse(n, is_open):
    if n:
        return not is_open
    return is_open

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

This is what I get:

enter image description here

When I click on the button, nothing happens.
I tryied to figure out where is the problem, I discovered that:

What can I do in order to make it work?

Version info:

Python                    3.7.0
dash                      1.12.0
dash-bootstrap-components 0.10.1
dash-core-components      1.10.0
dash-html-components      1.0.3
dash-renderer             1.4.1
dash-table                4.7.0
plotly                    4.7.0

Upvotes: 5

Views: 11026

Answers (1)

user11989081
user11989081

Reputation: 8654

If you link the Boostrap stylesheet your code will work as it is.

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

Upvotes: 7

Related Questions