# How make a SideBar hide and show

**URL:** </static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-make-a-sidebar-hide-and-show%2F58590%3E%5C
**Category:** 🔒 Gradio\
**Created:** [October 15, 2023, 1:37am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-make-a-sidebar-hide-and-show%2F58590 "2023-10-15T01:37:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tobsad](https://avatars.discourse-cdn.com/v4/letter/t/8797f3/32.png) [@Tobsad](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FTobsad)%5C
**Post date:** [October 15, 2023, 1:37am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-make-a-sidebar-hide-and-show%2F58590%2F1 "2023-10-15T01:37:54Z")

</div>

I want the sidebar called “sidebar\_left” to be hidden or shown, when I press the “btn\_toggle\_sidebar” button, how do I do it?  
I’ve been stuck for 2 days now

```auto
import gradio as gr
css='./css/template.css'
LANGS = ["ace_Arab", "eng_Latn", "fra_Latn", "spa_Latn"]

app= gr.Blocks(css=css)

# def active():
# state_bar = not sidebar_right.visible
# return print(state_bar)

sidebar_state = False

def toggle_sidebar():
    sidebar_state = not sidebar_state
    return print(sidebar_state)

with app:
    with gr.Row():
        with gr.Column(visible=sidebar_state) as sidebar_left:
            gr.Markdown("SideBar Left")
        with gr.Column() as main:
            with gr.Row(): 
                nav_bar = gr.Markdown("NavBar")
            with gr.Row():
                with gr.Column():
                    gr.Chatbot()
                    with gr.Row():
                        prompt = gr.TextArea(label="",placeholder="Ask me")
                        btn_a = gr.Button("Audio",size="sm")
                        btn_b = gr.Button("Send",size="sm")
                        btn_c = gr.Button("Clear",size="sm")
                        btn_d = gr.Button("Mute",size="sm")
                        lang = gr.Dropdown(label="Source Language", choices=LANGS)

                        btn_toggle_sidebar = gr.Button("Toggle Sidebar")
                        btn_toggle_sidebar.click(toggle_sidebar)
                        
                        #btn_a.click(active)

        with gr.Column(visible=False) as sidebar_right:
            gr.Markdown("SideBar Right")

app.launch()

```

---

<div class="post-metadata">

**Author:** ![bluefoxcreation](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/bluefoxcreation/32/20467_2.png) [@bluefoxcreation](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fbluefoxcreation)%5C
**Post date:** [October 19, 2023, 3:01pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-make-a-sidebar-hide-and-show%2F58590%2F2 "2023-10-19T15:01:01Z")

</div>

Something like this should work:

```auto
import gradio as gr
css='./css/template.css'
LANGS = ["ace_Arab", "eng_Latn", "fra_Latn", "spa_Latn"]

app= gr.Blocks(css=css)

# def active():
# state_bar = not sidebar_right.visible
# return print(state_bar)

def toggle_sidebar(state):
    state = not state
    return gr.update(visible = state), state

with app:
    with gr.Row():
        with gr.Column(visible=False) as sidebar_left:
            gr.Markdown("SideBar Left")
        with gr.Column() as main:
            with gr.Row():
                nav_bar = gr.Markdown("NavBar")
            with gr.Row():
                with gr.Column():
                    gr.Chatbot()
                    with gr.Row():
                        prompt = gr.TextArea(label="",placeholder="Ask me")
                        btn_a = gr.Button("Audio",size="sm")
                        btn_b = gr.Button("Send",size="sm")
                        btn_c = gr.Button("Clear",size="sm")
                        btn_d = gr.Button("Mute",size="sm")
                        lang = gr.Dropdown(label="Source Language", choices=LANGS)

                        sidebar_state = gr.State(False)

                        btn_toggle_sidebar = gr.Button("Toggle Sidebar")
                        btn_toggle_sidebar.click(toggle_sidebar, [sidebar_state], [sidebar_left, sidebar_state])

                        #btn_a.click(active)

        with gr.Column(visible=False) as sidebar_right:
            gr.Markdown("SideBar Right")

app.launch()

```