I refer to this question: Changing visibility of a Dash Component by updating other Component.
The accepted answer shows how to hide a component, after choosing the respective value in a drop-down menu. I want to unhide components which are hidden as default. I tried the code from the accepted answer:
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash('example')
app.layout = html.Div([
dcc.Dropdown(
id='dropdown-to-show_or_hide-element',
options=[
{'label': 'Show element', 'value': 'on'},
{'label': 'Hide element', 'value': 'off'}
],
value='on'
),
# Create Div to place a conditionally visible element inside
html.Div([
# Create element to hide/show, in this case an 'Input Component'
dcc.Input(
id='element-to-hide',
placeholder='something',
value='Can you see me?',
)
], style={'display': 'none'} # <-- This is the line that will be changed by the dropdown callback
)
])
@app.callback(
Output(component_id='element-to-hide', component_property='style'),
[Input(component_id='dropdown-to-show_or_hide-element', component_property='value')])
def show_hide_element(visibility_state):
if visibility_state == 'on':
print('on')
return {'display': 'block'}
if visibility_state == 'off':
print('off')
return {'display': 'none'}
if __name__ == '__main__':
app.run_server(debug=True)
The only thing I've changed is this line of code
], style={'display': 'block'} # <-- This is the line that will be changed by the dropdown
to
], style={'display': 'none'} # <-- This is the line that will be changed by the dropdown
But when I run the app the input component is not shown at all. Even if I switch the drop-down to 'on'.
Is it possible to have hidden components by default and to unhide them later? And if not, why can I override the value from the display-style parameter from 'block' to 'none' but not from 'none' to 'block'?
