Accordion - Done

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:

<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:

<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>