> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# Accordion

> A layout component that creates collapsible sections to organize content.

## Overview

The `Accordion` component creates collapsible sections that can be expanded or collapsed by the user. It's useful for organizing content and reducing visual clutter by hiding less frequently accessed options.

## Basic usage

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    with gr.Accordion("Advanced Settings"):
        gr.Slider(label="Temperature")
        gr.Slider(label="Max tokens")
        gr.Checkbox(label="Use cache")

demo.launch()
```

## Parameters

<ParamField path="label" type="str">
  The label of the accordion which is displayed when the accordion is collapsed.
</ParamField>

<ParamField path="open" type="bool" default="False">
  If True, the accordion is expanded by default. If False, it is collapsed.
</ParamField>

<ParamField path="visible" type="bool" default="True">
  If False, accordion will be hidden.
</ParamField>

<ParamField path="elem_id" type="str | None" default="None">
  An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
</ParamField>

<ParamField path="elem_classes" type="list[str] | str | None" default="None">
  An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
</ParamField>

<ParamField path="render" type="bool" default="True">
  If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
</ParamField>

## Behavior

### Default state

By default, accordions are collapsed. You can change this:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    # This accordion starts expanded
    with gr.Accordion("Quick Settings", open=True):
        gr.Checkbox(label="Enable feature")
    
    # This accordion starts collapsed
    with gr.Accordion("Advanced Settings", open=False):
        gr.Slider(label="Fine-tune parameter")

demo.launch()
```

## Examples

### Organizing settings

Group related settings in collapsible sections:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    gr.Textbox(label="Prompt")
    
    with gr.Accordion("Model Settings"):
        gr.Dropdown(["GPT-4", "GPT-3.5", "Claude"], label="Model")
        gr.Slider(0, 2, label="Temperature")
        gr.Slider(1, 4000, label="Max tokens")
    
    with gr.Accordion("Output Settings"):
        gr.Checkbox(label="Stream response")
        gr.Checkbox(label="Show timestamps")
        gr.Number(label="Response count")
    
    gr.Button("Generate")

demo.launch()
```

### Help sections

Provide optional help text without cluttering the interface:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    gr.Textbox(label="Email")
    
    with gr.Accordion("ℹ️ Email format help", open=False):
        gr.Markdown("""
        ### Email Format Guidelines
        - Use a valid email address format
        - Example: user@example.com
        - Multiple emails should be comma-separated
        """)
    
    gr.Textbox(label="Password")
    
    with gr.Accordion("ℹ️ Password requirements", open=False):
        gr.Markdown("""
        ### Password Requirements
        - At least 8 characters
        - Include uppercase and lowercase letters
        - Include at least one number
        - Include at least one special character
        """)

demo.launch()
```

### Progressive disclosure

Show basic options first, hide advanced ones:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("### Image Generator")
    
    # Basic options always visible
    prompt = gr.Textbox(label="Prompt")
    num_images = gr.Slider(1, 4, value=1, label="Number of images")
    
    # Advanced options hidden by default
    with gr.Accordion("Advanced Options", open=False):
        guidance_scale = gr.Slider(1, 20, value=7.5, label="Guidance scale")
        steps = gr.Slider(10, 100, value=50, label="Steps")
        seed = gr.Number(label="Seed (leave empty for random)")
        negative_prompt = gr.Textbox(label="Negative prompt")
    
    generate_btn = gr.Button("Generate")
    output = gr.Gallery(label="Generated images")

demo.launch()
```

### Programmatically toggle accordion

Open or close accordions based on user actions:

```python theme={null}
import gradio as gr

def check_custom(choice):
    if choice == "Custom":
        return gr.Accordion(open=True)
    return gr.Accordion(open=False)

with gr.Blocks() as demo:
    mode = gr.Radio(
        ["Default", "Quick", "Custom"],
        label="Mode",
        value="Default"
    )
    
    custom_accordion = gr.Accordion("Custom Settings", open=False)
    with custom_accordion:
        gr.Slider(label="Parameter 1")
        gr.Slider(label="Parameter 2")
        gr.Checkbox(label="Enable feature X")
    
    mode.change(
        check_custom,
        inputs=mode,
        outputs=custom_accordion
    )

demo.launch()
```

### Multiple accordions

Create a FAQ-style interface:

````python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# Frequently Asked Questions")
    
    with gr.Accordion("What is Gradio?", open=False):
        gr.Markdown("""
        Gradio is a Python library that allows you to quickly create 
        web interfaces for your machine learning models.
        """)
    
    with gr.Accordion("How do I install Gradio?", open=False):
        gr.Markdown("""
        You can install Gradio using pip:
        ```bash
        pip install gradio
````

""")

with gr.Accordion("Can I customize the appearance?", open=False):
gr.Markdown("""
Yes! Gradio supports custom CSS and theming to match your brand.
""")

with gr.Accordion("Is Gradio free?", open=False):
gr.Markdown("""
Yes, Gradio is open source and free to use under the Apache 2.0 license.
""")

demo.launch()

````

### Nested accordions

Create hierarchical organization:

```python
import gradio as gr

with gr.Blocks() as demo:
    with gr.Accordion("Configuration", open=True):
        gr.Textbox(label="API Key")
        
        with gr.Accordion("Network Settings", open=False):
            gr.Textbox(label="Proxy URL")
            gr.Number(label="Timeout (seconds)")
        
        with gr.Accordion("Advanced Features", open=False):
            gr.Checkbox(label="Enable caching")
            gr.Checkbox(label="Debug mode")

demo.launch()
````

### Data sections

Organize different data inputs:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("### Data Analysis Tool")
    
    with gr.Accordion("📊 Upload Data", open=True):
        gr.File(label="CSV File")
        gr.Checkbox(label="Has header row")
    
    with gr.Accordion("🔧 Processing Options", open=True):
        gr.CheckboxGroup(
            ["Remove duplicates", "Fill missing values", "Normalize"],
            label="Preprocessing steps"
        )
    
    with gr.Accordion("📈 Visualization Settings", open=False):
        gr.Dropdown(
            ["Bar", "Line", "Scatter", "Box"],
            label="Chart type"
        )
        gr.ColorPicker(label="Color scheme")
    
    gr.Button("Analyze")

demo.launch()
```

## Methods

### update

Update the accordion's properties:

```python theme={null}
import gradio as gr

with gr.Blocks() as demo:
    accordion = gr.Accordion("Settings", open=False)
    with accordion:
        gr.Slider(label="Value")
    
    expand_btn = gr.Button("Expand Settings")
    expand_btn.click(
        lambda: gr.Accordion(open=True),
        outputs=accordion
    )
    
    collapse_btn = gr.Button("Collapse Settings")
    collapse_btn.click(
        lambda: gr.Accordion(open=False),
        outputs=accordion
    )

demo.launch()
```

## Notes

<Note>
  Accordions are useful for progressive disclosure - showing basic options upfront while keeping advanced features accessible but hidden until needed.
</Note>

<Tip>
  Use descriptive labels for your accordions. Adding emoji icons can help users quickly identify the purpose of each section.
</Tip>

<Tip>
  Consider starting with the most commonly used accordion open (`open=True`) to guide users to the most important settings.
</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.