Trying the make a button toggle between display: none/block

Dash Python
1

I am trying to make the div show up when i click it and then make it disapair when i click it again.

I am able to click it to make it show up, but i cant make it disappear.

html.Button('Menu1', id="vbutton1"),



html.Div(
            id="boxes",
            
            style={
                'display': 'none'
            },
            children=[......

)
        ])


@app.callback(Output('boxes', 'style'),[Input('vbutton1', 'n_clicks')])
def update_style(style):
    if style:    
        return {'display': 'grid'}


<style>
#boxes {
  display: none;
  grid-template-columns: auto auto auto;
  justify-items: center;
}
 </style>
2

Hi,

So you can do this by simple if and else statements as follows:
*I have used the same external CSS that you provided.

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


external_css = [
    'https://codepen.io/muhnot/pen/RBXmaP.css'
]

app = dash.Dash(
                external_stylesheets=external_css
)

app.layout = html.Div(children=[
                      html.Button('Menu1', id="vbutton1"),
                      html.Div(id = "boxes", children=[html.H1("Visible.")] )
])

@app.callback(Output('boxes', 'style'),[Input('vbutton1', 'n_clicks')])
def update_style(click):
    if click==None:
       return {'display': 'block'}
    if click%2==0:    
       return {'display': 'block'}
    else:
        return {'display': 'none'}

server = app.server 

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=9601, debug=True)
1 Like
3

Thanks a lot my friend! Works like a charm.

1 Like
4

Lets say i have 3 menu items, and when clicked on one, i want to make sure the other two goes “display: none”. Is there any way of doing this you think ?

5

By 3 menu item’s … do you mean 3 buttons or 3 list items?

I have coded the solution for 3 buttons. Similarly, you can change the style of any Id you want.

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


external_css = [
    'https://codepen.io/muhnot/pen/RBXmaP.css'
]

app = dash.Dash(
                external_stylesheets=external_css
)

app.layout = html.Div(children=[
                      html.Button('box1', id="b1"),
                      html.Button('box2', id="b2"),
                      html.Button('box3', id="b3")
])

@app.callback([Output('b1', 'style'),Output('b2', 'style'),Output('b3', 'style')],[Input('b1', 'n_clicks'),Input('b2', 'n_clicks'),Input('b3', 'n_clicks')])
def update_style(click1,click2,click3):
    if click1==None and click2==None and click3==None:
       return {'display': 'block'},{'display': 'block'},{'display': 'block'}
    if(click1):
       return {'display': 'block'},{'display': 'none'},{'display': 'none'}
    if(click2):
       return {'display': 'none'},{'display': 'block'},{'display': 'none'}
    if(click3):
       return {'display': 'none'},{'display': 'none'},{'display': 'block'}
    

server = app.server 

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=9601, debug=True)
6

This is something that i was looking for. Thanks alot!

1 Like