---
title: Accordion - Done
slug: accordion-done
createdAt: 2025-02-07T22:55:17.481Z
---

# Overview

The accordion component provides a collapsible UI element that allows users to expand and collapse content sections by clicking on headers. It is commonly used for FAQs, help sections, or structured information presentation.

# Structure

The accordion is built using the following HTML structure:

```html
<div class="accordion-wrapper">
    <div class="accordion-item">
        <div style="background-color:rgba(0,0,0,0);color:rgb(97,100,114);border-color:rgb(255,255,255)" class="accordion-header">
            <div>Accordion Title</div>
            <div class="accordion-icon w-embed">
                <svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <polygon points="16,22 6,12 7.4,10.6 16,19.2 24.6,10.6 26,12"></polygon>
                </svg>
            </div>
        </div>
        <div style="display:none" class="accordion-content">Accordion content goes here.</div>
    </div>
</div>
```

## Notes

- Inline styles (`style=""`) are required.
- Webflow handles all JavaScript interactions automatically.

# Example Usage

This example demonstrates how to structure multiple accordion items:

```html
<div class="accordion-wrapper">
    <div class="accordion-item">
        <div style="background-color:rgba(0,0,0,0);color:rgb(97,100,114);border-color:rgb(255,255,255)" class="accordion-header">
            <div>What is an active session?</div>
            <div class="accordion-icon w-embed">
                <svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <polygon points="16,22 6,12 7.4,10.6 16,19.2 24.6,10.6 26,12"></polygon>
                </svg>
            </div>
        </div>
        <div style="display:none" class="accordion-content">An active session represents a device where you are currently logged into your account.</div>
    </div>
</div>
```