> This page is for Flowkit CSS Framework, version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/flowkit/v2.0.0/llms.txt
> - v1: https://developers.webflow.com/flowkit/v1.0.0/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Accordion

> Accordions are expandable panels that show and hide content.

## Class Naming

The accordion component is used to toggle the visibility of content in a vertically stacked format. It uses a base wrapper class and relies on two key internal elements for structure and interactivity.

The base class is accordion

## Elements

These elements are usually built using Webflow's dropdown component but styled with the above classes for visual consistency and behavior within the framework.

| Class              | Purpose                                      |
| ------------------ | -------------------------------------------- |
| accordion\_toggle  | Button that triggers the open/close behavior |
| accordion\_content | The content area that expands/collapses      |