Update accordion from backend

[freddyaboulton]

Description

Fixes #2668 .

I don't think I'll be able to address any feedback until I come back so feel free to push commits + merge without me!

Would be good to add a front-end test for this as well.

To test:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Accordion(label="Open for greeting", open=False) as accordion:
        gr.Textbox("Hello!")
    open_btn = gr.Button(value="Open Accordion")
    close_btn = gr.Button(value="Close Accordion")
    open_btn.click(
        lambda: gr.Accordion.update(open=True, label="Open Accordion"),
        inputs=None,
        outputs=[accordion],
    )
    close_btn.click(
        lambda: gr.Accordion.update(open=False, label="Closed Accordion"),
        inputs=None,
        outputs=[accordion],
    )
demo.launch()

Checklist:

• I have performed a self-review of my own code
• I have added a short summary of my change to the CHANGELOG.md
• My code follows the style guidelines of this project
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

A note about the CHANGELOG

Hello 👋 and thank you for contributing to Gradio!

All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.

Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by [@myusername](link-to-your-github-profile) in [PR 11111](https://github.com/gradio-app/gradio/pull/11111)".

If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the
GitHub web UI since that lets you upload files directly via drag-and-drop.

[github-actions]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-2690-all-demos

[abidlabs]

Thanks @freddyaboulton! Is this ready to be reviewed or still a draft PR?

[freddyaboulton]

@abidlabs Opened now! Was waiting for CI

[abidlabs]

Works great with top-level accordions, but I'm getting some interesting behavior with nested accordions. It seems that when you programmatically toggle the inner accordion, the outer accordion collapses if it is open? Here's an example for reproduction:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Accordion(label="Open for greeting", open=False) as accordion:
        gr.Textbox("Hello!")
        with gr.Accordion(label="Inner", open=False) as inner:
            gr.Textbox("hi")
    open_btn = gr.Button(value="Open Accordion")
    close_btn = gr.Button(value="Close Accordion")
    open_btn.click(
        lambda: gr.Accordion.update(open=True, label="Open Accordion"),
        inputs=None,
        outputs=[inner],
    )
    close_btn.click(
        lambda: gr.Accordion.update(open=False, label="Closed Accordion"),
        inputs=None,
        outputs=[inner],
    )
demo.launch()

Here's what I see:

[pngwn]

Probably a front end issue. Will take a look.

[freddyaboulton]

@abidlabs I think I fixed the inner accordion issue! Note that when you update the inner accordion state when the parent accordion is closed, the inner accordion has the correct state when you open the parent accordion.

@pngwn Does this look good to you?

[abidlabs]

LGTM works great for me!

[freddyaboulton]

Thank you all for the reviews 🤗

[githubheyguy]

I have multiple Accordions in my code, and I want to ensure that when I toggle one Accordion open, the others automatically close. Here's the current code I have:

`

with gr.Accordion("1") as acc_1:
    pass

with gr.Accordion("2") as acc_2:
    pass

with gr.Accordion("3") as acc_3:
    pass

with gr.Accordion("4") as acc_4:
    pass

`