Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Changing `open` property of `html.Details` in a call back

I have a html.Details object in my layout. Depending on the actions I want to automatically open or close this group. When I put it in a callback output, I get an error saying that the open property is not valid. Does this mean I cannot change this property through a callback?

Invalid argument open passed into Details with ID “test-layout”.
Value provided: “close”

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser’s console.)
Error: Invalid argument open passed into Details with ID “test-layout”.

Value provided: “close”

at propTypeErrorHandler (

at CheckedComponent (

at renderWithHooks (

at updateFunctionComponent (

at beginWork (

at HTMLUnknownElement.callCallback (

at Object.invokeGuardedCallbackDev (

at invokeGuardedCallback (

at beginWork$1 (

at performUnitOfWork (

Hi anish,

The html.Details property ‘open’ can be changed and managed using callback, the problem you are facing is that you are providing ‘close’ instead of True or False

This example works:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__,)
app.layout = html.Div([

            {'label': "Close", 'value': "Close"}, {'label': "Open", 'value': "Open"}
                 ], value=1, id="radio_items"),

        html.Details("This is the children option", id="details"),

         ], style={'margin-left': '5.4%', 'width': '20.4%', 'display': 'inline-block'}),

 ], style={'background-color': 'white'})

    Output('details', 'open'),
    Input('radio_items', 'value'))
def set_cities_options(selected):
    if selected == "Close":
        return False
        return True
if __name__ == '__main__':

Hey AnnMarieW, thanks for your :heart:

New generation do not recognize others effort :woozy_face: :joy: