Toggle Collapse

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = [
    'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css']
external_scripts = [
    'https://code.jquery.com/jquery-3.3.1.slim.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js',
    'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'
]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets,
                external_scripts=external_scripts)


#collapse_div = html.Div([
#    html.H2('This is a collapsible section'),
#    html.Button('Toggle Collapse', id='collapse-button', className='btn btn-primary',
#                **{'data-toggle': 'collapse', 'data-target': '#collapse-section'}),
#   html.Div('This is the content that will be collapsed and expanded.',
#             id='collapse-section', className='collapse')
#])

collapse_div = html.Div([
    html.Button('Toggle Button', id='myBtnID', className='btn',
                **{'data-toggle': 'collapse',
                   'data-target': '#collapse-section'}),
    html.Div('This is the content', className='collapse'
             id='collapse-section')
])

#app.layout = html.Div(children=[collapse_div])
app.layout = dcc.Loading(children=[collapse_div])

if __name__ == '__main__':
    app.run_server(debug=True)