# Accordion API Reference

### Example Accordions

A simple accordion with fluid collapsing and expanding animation where only a single Section can be exanded at any time.

See Source

See Output

## Accordion Header

  * Section 1

Content for the first section.

More content here.

  * Section 2

Content for the second section.

A label inside!

  * Section 3 - The last one!

Content for the third section.

[code]

    def ex_accordion_1():
        return Div(
            H2("Accordion Header"),
            Accordion(
                AccordionItem(
                    "Section 1",
                    P("Content for the first section."),
                    P("More content here."),
                ),
                AccordionItem(
                    "Section 2",
                    P("Content for the second section."),
                    Label("A label inside!"),
                    li_kwargs={"id": "section-2"},
                ),
                AccordionItem(
                    "Section 3 - The last one!", P("Content for the third section.")
                ),
                multiple=False,
                animation=True,
            ),
        ),
    
[/code]

An accordion with fluid collapsing and expanding animation where one section is already expanded at startup and multiple section can be expanded at any time.

See Source

See Output

## Accordion Header

  * Section 1

Content for the first section.

More content here.

  * Section 2

Content for the second section.

A label inside!

  * Section 3 - The last one!

Content for the third section.

[code]

    def ex_accordion_2():
        return Div(
            H2("Accordion Header"),
            Accordion(
                AccordionItem(
                    "Section 1",
                    P("Content for the first section."),
                    P("More content here."),
                    open=True,
                ),
                AccordionItem(
                    "Section 2",
                    P("Content for the second section."),
                    Label("A label inside!"),
                    li_kwargs={"id": "section-2"},
                ),
                AccordionItem(
                    "Section 3 - The last one!", P("Content for the third section.")
                ),
                multiple=True,
                animation=True,
            ),
        ),
    
[/code]

An accordion with no collapsing and expanding animation where only a single Section can be exanded at any time.

See Source

See Output

## Accordion Header

  * Section 1

Content for the first section.

More content here.

  * Section 2

Content for the second section.

A label inside!

  * Section 3 - The last one!

Content for the third section.

[code]

    def ex_accordion_3():
        return Div(
            H2("Accordion Header"),
            Accordion(
                AccordionItem(
                    "Section 1",
                    P("Content for the first section."),
                    P("More content here."),
                ),
                AccordionItem(
                    "Section 2",
                    P("Content for the second section."),
                    Label("A label inside!"),
                    li_kwargs={"id": "section-2"},
                ),
                AccordionItem(
                    "Section 3 - The last one!", P("Content for the third section.")
                ),
                multiple=False,
                animation=False,
            ),
        ),
    
[/code]

### API Reference

### Accordion

Source

[code]

    Accordion(*c: 'AccordionItem', cls: Union[str, enum.Enum, tuple] = (), multiple: Optional[bool] = None, collapsible: Optional[bool] = None, animation: Optional[bool] = None, duration: Optional[int] = None, active: Optional[int] = None, transition: Optional[str] = None, tag: str = 'ul', **kwargs) -> fastcore.xml.FT
[/code]

> Creates a styled Accordion container using accordion component.

**Params**

  * `c` One or more `AccordionItem` components

  * `cls` Additional classes for the container (`Ul` or `Div`)

  * `multiple` Allow multiple items to be open simultaneously (UIkit option)

  * `collapsible` Allow all items to be closed (UIkit option, default True)

  * `animation` Enable/disable animation (UIkit option, default True)

  * `duration` Animation duration in ms (UIkit option, default 200)

  * `active` Index (0-based) of the item to be open by default (UIkit option)

  * `transition` Animation transition timing function (UIkit option, e.g., 'ease-out')

  * `tag` HTML tag for the container ('ul' or 'div')

  * `kwargs`

**Returns:** Ul(*items...) or Div(*items...)

### AccordionItem

Source

[code]

    AccordionItem(title: Union[str, fastcore.xml.FT], *c: fastcore.xml.FT, cls: Union[str, enum.Enum, tuple] = (), title_cls: Union[str, enum.Enum, tuple] = ('flex justify-between items-center w-full',), content_cls: Union[str, enum.Enum, tuple] = (), open: bool = False, li_kwargs: Optional[Dict] = None, a_kwargs: Optional[Dict] = None, div_kwargs: Optional[Dict] = None) -> fastcore.xml.FT
[/code]

> Creates a single item for use within an Accordion component, handling title, content, and open state.

**Params**

  * `title` Content for the accordion item title

  * `c` Content to display when the item is open

  * `cls` Additional classes for the outer `Li` container

  * `title_cls` Additional classes for the title `A` tag

  * `content_cls` Additional classes for the content `Div`

  * `open` Whether this item should be open by default

  * `li_kwargs` Additional attributes for the outer `Li` tag

  * `a_kwargs` Additional attributes for the title `A` tag

  * `div_kwargs` Additional attributes for the content `Div` tag

**Returns:** Li(A(title, Span(Icon, Icon)), Div(content))