Plotly Dash: dash_bootstrap_components.Collapse does not collapse

Issue

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:

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

• n in the app.callback is initialized to None, after one click it becomes 1, then it increases by 1 with the number of button clicks, correclty
• is_open in the app.callback is initialized to None, after one click it still remains None, then after the second click become True, after third click False and so on

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

Solution

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

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

Answered By – Flavia Giammarino

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0