Add accordion component (#2208)

* changes

* changes

demo/blocks_flipper/run.py

@@ -18,7 +18,10 @@ with gr.Blocks() as demo:
             image_input = gr.Image()
             image_output = gr.Image()
         image_button = gr.Button("Flip")
-    
+
+    with gr.Accordion("Open for More!"):
+        gr.Markdown("Look at me...")
+
     text_button.click(flip_text, inputs=text_input, outputs=text_output)
     image_button.click(flip_image, inputs=image_input, outputs=image_output)
     

demo/rows_and_columns/run.py

@@ -15,5 +15,6 @@ with gr.Blocks() as demo:
         with gr.Column(scale=2, min_width=600):
             img1 = gr.Image("images/cheetah.jpg")
             btn = gr.Button("Go").style(full_width=True)
+
 if __name__ == "__main__":
     demo.launch()

gradio/__init__.py

@@ -55,7 +55,7 @@ from gradio.flagging import (
 )
 from gradio.interface import Interface, TabbedInterface, close_all
 from gradio.ipython_ext import load_ipython_extension
-from gradio.layouts import Box, Column, Group, Row, Tab, TabItem, Tabs
+from gradio.layouts import Accordion, Box, Column, Group, Row, Tab, TabItem, Tabs
 from gradio.mix import Parallel, Series
 from gradio.templates import (
     Files,

gradio/layouts.py

@@ -296,3 +296,45 @@ class Box(BlockContext):
 class Form(BlockContext):
     def get_config(self):
         return {"type": "form", **super().get_config()}
+
+
+@document()
+class Accordion(BlockContext):
+    """
+    Accordion is a layout element which can be toggled to show/hide the contained content.
+    Example:
+        with gradio.Accordion("See Details"):
+            gr.Markdown("lorem ipsum")
+    """
+
+    def __init__(
+        self, label, *, open: bool = True, elem_id: Optional[str] = None, **kwargs
+    ):
+        """
+        Parameters:
+            label: name of accordion section.
+            open: if True, accordion is open by default.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+        """
+        self.label = label
+        self.open = open
+        super().__init__(elem_id=elem_id, **kwargs)
+
+    def get_config(self):
+        return {
+            "type": "accordion",
+            "open": self.open,
+            "label": self.label,
+            **super().get_config(),
+        }
+
+    @staticmethod
+    def update(
+        open: Optional[bool] = None,
+        visible: Optional[bool] = None,
+    ):
+        return {
+            "visible": visible,
+            "open": open,
+            "__type__": "update",
+        }

guides/3)building_with_blocks/2)controlling_layout.md

@@ -31,7 +31,7 @@ $demo_rows_and_columns
 
 See how the first column has two Textboxes arranged vertically. The second column has an Image and Button arranged vertically. Notice how the relative widths of the two columns is set by the `scale` parameter. The column with twice the `scale` value takes up twice the width.
 
-## Tabs
+## Tabs amd Accordions
 
 You can also create Tabs using the `with gradio.Tab('tab_name'):` clause. Any component created inside of a `with gradio.Tab('tab_name'):` context appears in that tab. Consecutive Tab clauses are grouped together so that a single tab can be selected at one time, and only the components within that Tab's context are shown.
 
@@ -40,6 +40,8 @@ For example:
 $code_blocks_flipper
 $demo_blocks_flipper
 
+Also note the Accordion that can be opened and closed - another layout element to selectively show content.
+
 ## Visibility
 
 Both Components and Layout elements have a `visible` argument that can set initially and also updated using `gr.update()`. Setting `gr.update(visible=...)` on a Column can be used to show or hide a set of Components.

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Component as Column } from "../Column";
+	export let label: string;
+	export let elem_id: string;
+	export let visible: string;
+	export let open: boolean = true;
+
+	const toggle = () => {
+		open = !open;
+	};
+</script>
+
+<div
+	id={elem_id}
+	class="p-3 border border-gray-200 dark:border-gray-700 rounded-lg flex flex-col gap-3 hover:border-gray-300 dark:hover:border-gray-600 transition"
+	class:hidden={!visible}
+>
+	<div on:click={toggle} class="w-full flex justify-between cursor-pointer">
+		<span>{label}</span>
+		<span class:rotate-90={!open} class="transition">▼</span>
+	</div>
+	<Column visible={open}>
+		<slot />
+	</Column>
+</div>

ui/packages/app/src/components/Accordion/index.ts

@@ -0,0 +1,2 @@
+export { default as Component } from "./Accordion.svelte";
+export const modes = ["static"];

ui/packages/app/src/components/directory.ts

@@ -1,4 +1,5 @@
 export const component_map = {
+	accordion: () => import("./Accordion"),
 	audio: () => import("./Audio"),
 	box: () => import("./Box"),
 	button: () => import("./Button"),