Accordion

Toggle content visibility with expandable accordion sections. Ideal for FAQs, feature details, and any content that benefits from progressive disclosure.

Basic Accordion

Use the .hu-accordion wrapper with .hu-accordion-item children. Each item has a clickable header and a collapsible body.

Basic Accordion

What is web hosting?

Web hosting is a service that allows your website to be accessible on the internet. A web host provides space on their servers to store your website files, making them available to visitors worldwide.

How do I transfer my domain?

To transfer your domain, you'll need to unlock it from your current registrar, obtain an authorization code, and initiate the transfer from your new hosting provider. The process typically takes 5-7 days.

What payment methods do you accept?

We accept all major credit cards, PayPal, and bank transfers. All transactions are securely processed with 256-bit SSL encryption to protect your payment information.

HTML

<div class="hu-accordion">
    <div class="hu-accordion-item">
        <div class="hu-accordion-header">
            <button class="hu-accordion-btn" aria-expanded="false">
                <span class="hu-accordion-title">What is web hosting?</span>
                <svg class="hu-accordion-icon" ...>...</svg>
            </button>
        </div>
        <div class="hu-accordion-body">
            <div class="hu-accordion-body-inner">
                <p>Web hosting is a service...</p>
            </div>
        </div>
    </div>
</div>

Initially Open Item

Add the hu-active class and set aria-expanded="true" to have an accordion item open by default.

Initially Open Accordion

What is web hosting?

How do I transfer my domain?

To transfer your domain, you'll need to unlock it from your current registrar, obtain an authorization code, and initiate the transfer from your new hosting provider.

HTML

<div class="hu-accordion-item hu-active">
    <div class="hu-accordion-header">
        <button class="hu-accordion-btn" aria-expanded="true">
            <span class="hu-accordion-title">What is web hosting?</span>
            <svg class="hu-accordion-icon" ...>...</svg>
        </button>
    </div>
    <div class="hu-accordion-body">
        <div class="hu-accordion-body-inner">
            <p>This content is visible by default.</p>
        </div>
    </div>
</div>

Accordion with Rich Content

Accordion bodies can contain any HTML content, including code blocks, lists, tables, and other components.

Rich Content Accordion

Server Configuration

Server: Apache/2.4.51 (Unix)
PHP: 8.1.0
MySQL: 8.0.27
Memory Limit: 512M
Max Upload: 100M

Included Features

Free SSL Certificate
Daily Backups
99.9% Uptime SLA
24/7 Support
One-Click WordPress Install

Technical Specifications

Resource	Starter	Pro
Storage	10 GB	100 GB
Bandwidth	100 GB	Unlimited
Databases	5	Unlimited

HTML

<div class="hu-accordion-item">
    <div class="hu-accordion-header">
        <button class="hu-accordion-btn" aria-expanded="false">
            <span class="hu-accordion-title">Server Configuration</span>
            <svg class="hu-accordion-icon" ...>...</svg>
        </button>
    </div>
    <div class="hu-accordion-body">
        <div class="hu-accordion-body-inner">
            <!-- Code blocks, lists, tables, or any HTML -->
        </div>
    </div>
</div>

Real-World Examples

Real-world accordion examples for common use cases like FAQs and feature comparisons.

FAQ Section

What is web hosting?

Web hosting is a service that provides storage space and access for websites. When you sign up for web hosting, your website's files are stored on a server, which makes them accessible to anyone with an internet connection. Think of it as renting space on the internet for your website.

How do I transfer my domain?

Transferring your domain is straightforward:

Unlock your domain at your current registrar
Obtain an authorization/EPP code
Start the transfer from your new hosting provider
Verify the transfer via email
Wait 5-7 days for completion

What payment methods do you accept?

We accept a variety of payment methods for your convenience:

All major credit cards (Visa, Mastercard, American Express)
PayPal
Bank transfer
Alipay
Cryptocurrency (Bitcoin, Ethereum)

All transactions are protected with 256-bit SSL encryption.

Do you offer a money-back guarantee?

Yes! We offer a 30-day money-back guarantee on all hosting plans. If you're not completely satisfied with our service, we'll refund your hosting fee — no questions asked. Domain registration fees and add-on services are non-refundable.

HTML

<div class="hu-accordion">
    <div class="hu-accordion-item hu-active">
        <div class="hu-accordion-header">
            <button class="hu-accordion-btn" aria-expanded="true">
                <span class="hu-accordion-title">What is web hosting?</span>
                <svg class="hu-accordion-icon" ...>...</svg>
            </button>
        </div>
        <div class="hu-accordion-body">
            <div class="hu-accordion-body-inner">
                <p>Web hosting is a service that provides storage space...</p>
            </div>
        </div>
    </div>
    <!-- More FAQ items... -->
</div>

Server Configuration Details

Starter Plan

$2.99/month

1 Website
10 GB SSD Storage
100 GB Bandwidth
Free SSL Certificate
5 Email Accounts
24/7 Support

Professional Plan

$7.99/month

Unlimited Websites
100 GB SSD Storage
Unlimited Bandwidth
Free SSL + Domain
Unlimited Email Accounts
Priority Support

Enterprise Plan

$19.99/month

Unlimited Websites
200 GB NVMe Storage
Unlimited Bandwidth
Free SSL + Domain
Unlimited Email + Databases
Dedicated IP Address
DDoS Protection
Dedicated Support Agent

HTML

<div class="hu-accordion-item">
    <div class="hu-accordion-header">
        <button class="hu-accordion-btn" aria-expanded="false">
            <span class="hu-accordion-title">Starter Plan</span>
            <svg class="hu-accordion-icon" ...>...</svg>
        </button>
    </div>
    <div class="hu-accordion-body">
        <div class="hu-accordion-body-inner">
            <p><strong>$2.99/month</strong></p>
            <ul>
                <li>1 Website</li>
                <li>10 GB SSD Storage</li>
            </ul>
        </div>
    </div>
</div>

Feature Comparison

Storage & Performance

Feature	Starter	Pro	Enterprise
Storage	10 GB SSD	100 GB SSD	200 GB NVMe
Bandwidth	100 GB	Unlimited	Unlimited
PHP Workers	1	2	4

Security & Backups

Feature	Starter	Pro	Enterprise
SSL Certificate	Free	Free	Free
Daily Backups	7 days	30 days	90 days
DDoS Protection	Basic	Advanced	Premium
Malware Scanning	-	Weekly	Daily

Support & Services

Feature	Starter	Pro	Enterprise
Support	Email	24/7 Chat	Dedicated Agent
Response Time	24 hours	4 hours	1 hour
Migration	Self-service	Free	Free + Priority

HTML

<div class="hu-accordion-item hu-active">
    <div class="hu-accordion-header">
        <button class="hu-accordion-btn" aria-expanded="true">
            <span class="hu-accordion-title">Storage & Performance</span>
            <svg class="hu-accordion-icon" ...>...</svg>
        </button>
    </div>
    <div class="hu-accordion-body">
        <div class="hu-accordion-body-inner">
            <table class="hu-table">
                <thead>
                    <tr>
                        <th>Feature</th>
                        <th>Starter</th>
                        <th>Pro</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Storage</td>
                        <td>10 GB SSD</td>
                        <td>100 GB SSD</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

API Reference

Complete reference for all accordion classes, attributes, and JavaScript interactions.

Class	Element	Description
`.hu-accordion`	Wrapper	Root container for accordion items. Handles vertical spacing.
`.hu-accordion-item`	Child	Individual accordion section container.
`.hu-active`	Item	Marks an accordion item as expanded. Toggle via JavaScript.
`.hu-accordion-header`	Child	Container for the clickable accordion button.
`.hu-accordion-btn`	Button	Clickable header button that toggles the accordion item.
`.hu-accordion-title`	Span	Text content inside the accordion button.
`.hu-accordion-icon`	SVG	Chevron icon that rotates 180° when expanded.
`.hu-accordion-body`	Child	Collapsible content area. Hidden when collapsed.
`.hu-accordion-body-inner`	Child	Inner wrapper for padding and content styling.

Attribute	Element	Values	Description
`aria-expanded`	`.hu-accordion-btn`	`true` \| `false`	Indicates whether the accordion item is expanded. Update via JavaScript.

Accessibility: The accordion uses semantic <button> elements and aria-expanded attributes. Toggle the .hu-active class and aria-expanded value via JavaScript to manage state.