Changing value of "visible" attribute from "visible" to "hidden" sometimes has no effect

[plotly]

Changing value of "visible" attribute from "visible" to "hidden" sometimes has no effect

[chriddyp]

@jps1dell - thanks for reporting! can you post a full reproducable example? You might also want to check out the Tabs PR

[jps1dell]

Sure -- the code below should, I believe, hide Button 2 when Button 1 is pressed, and vice-versa:

import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div(
style={
'width': '80%',
'fontFamily': 'Sans-Serif',
'margin-left': 'auto',
'margin-right': 'auto'
}, id="div0",
children=[
html.Button("Hide Button 2", id="button01", disabled=False),
html.Button("Hide Button 1", id="button02", disabled=False),
]
)

@app.callback(
Output(component_id='button02', component_property='style'),
[
Input(component_id="button01", component_property="n_clicks")
]
)
def on_button01_click(n_clicks):
if (n_clicks) != None:
return {"visible" : "hidden"}

@app.callback(
Output(component_id='button01', component_property='style'),
[
Input(component_id="button02", component_property="n_clicks")
]
)
def on_button02_click(n_clicks):
if (n_clicks) != None:
return {"visible" : "hidden"}

app.run_server(debug=True)

[chriddyp]

@jps1dell {"visible" : "hidden"} isn't a valid CSS property or attribute. All of the attributes inside the style argument must refer to CSS properties (camelCased). In this case, you are probably looking for {'display': 'none'}

[jps1dell]

Ack! Duh -- thanks very much for clarifying.