# 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 <span class="sg-selector sg-class">accordion</span>

## 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                                      |
| ------------------------------------------------------------ | -------------------------------------------- |
| <span class="sg-selector sg-class">accordion\_toggle</span>  | Button that triggers the open/close behavior |
| <span class="sg-selector sg-class">accordion\_content</span> | The content area that expands/collapses      |