I want the icon inside a button to update depending on whether a collapsible section is open or closed. Right now, the collapsible toggles correctly, the button label changes but the button icon never changes.
from dash import Dash, html, Input, Output, State
import dash_bootstrap_components as dbc`
from dash import Dash, html, Input, Output, State
import dash_bootstrap_components as dbc
app = Dash(__name__)
app.layout = dbc.Container(
[
html.Button(
[html.I(className="fa fa-chevron-circle-down"), "Close"],
id="toggle-button",
),
dbc.Collapse(
dbc.Card(dbc.CardBody("This is the collapsible content.")),
id="collapse",
is_open=False,
),
],
className="p-5",
)
@app.callback(
Output("collapse", "is_open"),
Output("toggle-button", "children"),
Input("toggle-button", "n_clicks"),
State("collapse", "is_open"),
)
def toggle_collapse(n_clicks, is_open):
if n_clicks:
new_state = not is_open
if new_state:
children = [html.I(className="fa fa-chevron-circle-down"), "Close"]
else:
children = [html.I(className="fa fa-chevron-circle-up"), "Open"]
return new_state, children
return is_open, [html.I(className="fa fa-chevron-circle-down"), "Open"]
if __name__ == "__main__":
app.run(debug=True)
Hello,
I want the icon inside a button to update depending on whether a collapsible section is open or closed. Right now, the collapsible toggles correctly, the button label changes but the button icon never changes.
A small example: