Update accordion from backend (#2690)

* Update accordion from backend

* Update changelog

* Add gif to changelog

* Use reactive values

CHANGELOG.md

@@ -73,6 +73,33 @@ def echo(name, request: gr.Request):
 io = gr.Interface(echo, "textbox", "textbox").launch()
 ```
 
+### Update Accordion properties from the backend
+
+You can now update the Accordion `label` and `open` status with `gr.Accordion.update` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2690](https://github.com/gradio-app/gradio/pull/2690)
+
+```python
+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()
+```
+
+![update_accordion](https://user-images.githubusercontent.com/41651716/203164176-b102eae3-babe-4986-ae30-3ab4f400cedc.gif)
+
 
 ## Bug Fixes:
 * Fixed bug that limited files from being sent over websockets to 16MB. The new limit

gradio/layouts.py

@@ -365,10 +365,12 @@ class Accordion(BlockContext):
     @staticmethod
     def update(
         open: Optional[bool] = None,
+        label: Optional[str] = None,
         visible: Optional[bool] = None,
     ):
         return {
             "visible": visible,
+            "label": label,
             "open": open,
             "__type__": "update",
         }

test/test_blocks.py

@@ -759,6 +759,36 @@ class TestSpecificUpdate:
             "__type__": "update",
         }
 
+    @pytest.mark.asyncio
+    async def test_accordion_update(self):
+        with gr.Blocks() as demo:
+            with gr.Accordion(label="Open for greeting", open=False) as accordion:
+                gr.Textbox("Hello!")
+            open_btn = gr.Button(label="Open Accordion")
+            close_btn = gr.Button(label="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],
+            )
+        result = await demo.process_api(fn_index=0, inputs=[None], request=None)
+        assert result["data"][0] == {
+            "open": True,
+            "label": "Open Accordion",
+            "__type__": "update",
+        }
+        result = await demo.process_api(fn_index=1, inputs=[None], request=None)
+        assert result["data"][0] == {
+            "open": False,
+            "label": "Closed Accordion",
+            "__type__": "update",
+        }
+
 
 class TestRender:
     def test_duplicate_error(self):

ui/packages/app/src/components/Accordion/Accordion.svelte

@@ -5,7 +5,7 @@
 	export let visible: boolean = true;
 	export let open: boolean = true;
 
-	let _open = open;
+	$: _open = open;
 
 	const toggle = () => {
 		_open = !_open;