Foundation Accordion

Foundation Accordion is a collapsible content component, commonly used for FAQs, content grouping, and other scenarios. This chapter covers various uses of accordion components.

Basic Accordion

Use the .accordion class and data-accordion attribute to create an accordion:

html

<ul class="accordion" data-accordion>
    <li class="accordion-item is-active" data-accordion-item>
        <a href="#" class="accordion-title">First Panel</a>
        <div class="accordion-content" data-tab-content>
            <p>This is the content of the first panel.</p>
        </div>
    </li>
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">Second Panel</a>
        <div class="accordion-content" data-tab-content>
            <p>This is the content of the second panel.</p>
        </div>
    </li>
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">Third Panel</a>
        <div class="accordion-content" data-tab-content>
            <p>This is the content of the third panel.</p>
        </div>
    </li>
</ul>

Multiple Panels Open

Use data-multi-expand="true" to allow multiple panels to be expanded simultaneously:

html

<ul class="accordion" data-accordion data-multi-expand="true">
    <li class="accordion-item is-active" data-accordion-item>
        <a href="#" class="accordion-title">Panel 1</a>
        <div class="accordion-content" data-tab-content>
            <p>Multiple panels can be expanded at the same time.</p>
        </div>
    </li>
    <li class="accordion-item is-active" data-accordion-item>
        <a href="#" class="accordion-title">Panel 2</a>
        <div class="accordion-content" data-tab-content>
            <p>This panel can also be expanded simultaneously.</p>
        </div>
    </li>
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">Panel 3</a>
        <div class="accordion-content" data-tab-content>
            <p>Click to expand this panel.</p>
        </div>
    </li>
</ul>

All Panels Closeable

Use data-allow-all-closed="true" to allow all panels to be closed:

html

<ul class="accordion" data-accordion data-allow-all-closed="true">
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">Closeable Panel 1</a>
        <div class="accordion-content" data-tab-content>
            <p>All panels can be closed.</p>
        </div>
    </li>
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">Closeable Panel 2</a>
        <div class="accordion-content" data-tab-content>
            <p>Click an expanded title to collapse it.</p>
        </div>
    </li>
</ul>

Nested Accordion

html

<ul class="accordion" data-accordion>
    <li class="accordion-item is-active" data-accordion-item>
        <a href="#" class="accordion-title">Outer Panel 1</a>
        <div class="accordion-content" data-tab-content>
            <p>Content of outer panel.</p>
            <ul class="accordion" data-accordion data-allow-all-closed="true">
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Nested Panel A</a>
                    <div class="accordion-content" data-tab-content>
                        <p>Content of nested panel A.</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Nested Panel B</a>
                    <div class="accordion-content" data-tab-content>
                        <p>Content of nested panel B.</p>
                    </div>
                </li>
            </ul>
        </div>
    </li>
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">Outer Panel 2</a>
        <div class="accordion-content" data-tab-content>
            <p>Content of outer panel 2.</p>
        </div>
    </li>
</ul>

Custom Styling

Bordered Accordion

html

<style>
    .accordion.bordered {
        border: 1px solid #e6e6e6;
        border-radius: 4px;
    }
    .accordion.bordered .accordion-item {
        border-bottom: 1px solid #e6e6e6;
    }
    .accordion.bordered .accordion-item:last-child {
        border-bottom: none;
    }
    .accordion.bordered .accordion-title {
        border: none;
    }
</style>

<ul class="accordion bordered" data-accordion>
    <!-- Accordion items -->
</ul>

Titles with Icons

html

<style>
    .accordion-title.with-icon {
        position: relative;
        padding-right: 40px;
    }
    .accordion-title.with-icon::after {
        content: '+';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        transition: transform 0.3s;
    }
    .is-active > .accordion-title.with-icon::after {
        content: '−';
    }
</style>

<ul class="accordion" data-accordion>
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title with-icon">Title with Icon</a>
        <div class="accordion-content" data-tab-content>
            <p>Click title to expand/collapse content.</p>
        </div>
    </li>
</ul>

Colored Accordion

html

<style>
    .accordion.colored .accordion-title {
        background: #1779ba;
        color: white;
    }
    .accordion.colored .accordion-title:hover {
        background: #126195;
    }
    .accordion.colored .accordion-content {
        background: #f4f4f4;
    }
</style>

<ul class="accordion colored" data-accordion>
    <!-- Accordion items -->
</ul>

FAQ Example

html

<h2>Frequently Asked Questions</h2>
<ul class="accordion" data-accordion data-allow-all-closed="true">
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">How to register an account?</a>
        <div class="accordion-content" data-tab-content>
            <p>Click the "Register" button in the top right corner of the page, fill in your email, username, and password, then click "Create Account" to complete registration.</p>
        </div>
    </li>
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">What if I forgot my password?</a>
        <div class="accordion-content" data-tab-content>
            <p>Click the "Forgot Password" link on the login page, enter your registered email, and we will send a password reset link to your email.</p>
        </div>
    </li>
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">How to change personal information?</a>
        <div class="accordion-content" data-tab-content>
            <p>After logging in, go to "Personal Center" and click "Edit Profile" to modify your personal information.</p>
        </div>
    </li>
    <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">How to contact customer service?</a>
        <div class="accordion-content" data-tab-content>
            <p>You can contact us through:</p>
            <ul>
                <li>Online Support: Click the customer service icon at the bottom right of the page</li>
                <li>Email: support@example.com</li>
                <li>Phone: 400-123-4567</li>
            </ul>
        </div>
    </li>
</ul>

Deep Linking

Use data-deep-link="true" to support URL hash linking:

html

<ul class="accordion" data-accordion data-deep-link="true" data-deep-link-smudge="true" data-update-history="true">
    <li class="accordion-item" data-accordion-item>
        <a href="#panel1" class="accordion-title" id="panel1-heading">Panel 1</a>
        <div class="accordion-content" data-tab-content id="panel1">
            <p>This panel can be opened directly via URL #panel1.</p>
        </div>
    </li>
    <li class="accordion-item" data-accordion-item>
        <a href="#panel2" class="accordion-title" id="panel2-heading">Panel 2</a>
        <div class="accordion-content" data-tab-content id="panel2">
            <p>This panel can be opened directly via URL #panel2.</p>
        </div>
    </li>
</ul>

Configuration Options

Option	Description	Default
`data-multi-expand`	Allow multiple panels to be expanded simultaneously	false
`data-allow-all-closed`	Allow all panels to be closed	false
`data-deep-link`	Enable deep linking	false
`data-update-history`	Update browser history	false
`data-slide-speed`	Animation speed (milliseconds)	250

JavaScript API

Get Instance

javascript

var accordion = new Foundation.Accordion($('#my-accordion'));

Methods

javascript

// Expand specified panel
accordion.down($('#panel1'));

// Collapse specified panel
accordion.up($('#panel1'));

// Toggle specified panel
accordion.toggle($('#panel1'));

Events

javascript

$('#my-accordion').on('down.zf.accordion', function(event) {
    console.log('Panel expanded:', event.target);
});

$('#my-accordion').on('up.zf.accordion', function(event) {
    console.log('Panel collapsed:', event.target);
});

Complete Example

html

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Accordion Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        /* Bordered style */
        .accordion.bordered {
            border: 1px solid #e6e6e6;
            border-radius: 4px;
        }
        .accordion.bordered .accordion-item {
            border-bottom: 1px solid #e6e6e6;
        }
        .accordion.bordered .accordion-item:last-child {
            border-bottom: none;
        }

        /* With icons style */
        .accordion.with-icons .accordion-title {
            position: relative;
            padding-right: 40px;
        }
        .accordion.with-icons .accordion-title::after {
            content: '+';
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            font-weight: bold;
            color: #1779ba;
        }
        .accordion.with-icons .is-active > .accordion-title::after {
            content: '−';
        }

        /* Colored style */
        .accordion.primary-theme .accordion-title {
            background: #1779ba;
            color: white;
        }
        .accordion.primary-theme .accordion-title:hover {
            background: #126195;
        }

        /* FAQ style */
        .faq-accordion .accordion-title {
            font-weight: bold;
        }
        .faq-accordion .accordion-content {
            color: #666;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Accordion Showcase</h1>

        <div class="demo-section">
            <h3>Basic Accordion</h3>
            <ul class="accordion" data-accordion>
                <li class="accordion-item is-active" data-accordion-item>
                    <a href="#" class="accordion-title">First Panel</a>
                    <div class="accordion-content" data-tab-content>
                        <p>This is the content of the first panel. It is expanded by default.</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Second Panel</a>
                    <div class="accordion-content" data-tab-content>
                        <p>This is the content of the second panel. Click the title to expand.</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Third Panel</a>
                    <div class="accordion-content" data-tab-content>
                        <p>This is the content of the third panel.</p>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Multiple Panels Open</h3>
            <ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true">
                <li class="accordion-item is-active" data-accordion-item>
                    <a href="#" class="accordion-title">Can Expand Multiple</a>
                    <div class="accordion-content" data-tab-content>
                        <p>This accordion allows multiple panels to be expanded simultaneously.</p>
                    </div>
                </li>
                <li class="accordion-item is-active" data-accordion-item>
                    <a href="#" class="accordion-title">Multiple Panels</a>
                    <div class="accordion-content" data-tab-content>
                        <p>This panel is also expanded by default.</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Click to Expand</a>
                    <div class="accordion-content" data-tab-content>
                        <p>Click to expand this panel, other panels will not close.</p>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Bordered Style</h3>
            <ul class="accordion bordered" data-accordion data-allow-all-closed="true">
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Bordered Panel 1</a>
                    <div class="accordion-content" data-tab-content>
                        <p>This accordion has a bordered style.</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Bordered Panel 2</a>
                    <div class="accordion-content" data-tab-content>
                        <p>There is a divider between each panel.</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Bordered Panel 3</a>
                    <div class="accordion-content" data-tab-content>
                        <p>Overall has rounded border.</p>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>With Icons Style</h3>
            <ul class="accordion with-icons" data-accordion data-allow-all-closed="true">
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Click to Expand/Collapse</a>
                    <div class="accordion-content" data-tab-content>
                        <p>Title has +/- icon indicating state.</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Another Panel</a>
                    <div class="accordion-content" data-tab-content>
                        <p>Icon changes with expand/collapse state.</p>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Colored Theme</h3>
            <ul class="accordion primary-theme" data-accordion data-allow-all-closed="true">
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Blue Theme Panel 1</a>
                    <div class="accordion-content" data-tab-content>
                        <p>This accordion uses a blue theme.</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Blue Theme Panel 2</a>
                    <div class="accordion-content" data-tab-content>
                        <p>Title background is blue.</p>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>FAQ Frequently Asked Questions</h3>
            <ul class="accordion faq-accordion" data-accordion data-allow-all-closed="true">
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">How to register an account?</a>
                    <div class="accordion-content" data-tab-content>
                        <p>Click the "Register" button in the top right corner of the page, fill in your email, username, and password, then click "Create Account" to complete registration. After registration, you will receive a verification email, please click the link in the email to complete verification.</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">What if I forgot my password?</a>
                    <div class="accordion-content" data-tab-content>
                        <p>Click the "Forgot Password" link on the login page, enter your registered email, and we will send a password reset link to your email. Please click the link to reset your password within 24 hours.</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">How to change personal information?</a>
                    <div class="accordion-content" data-tab-content>
                        <p>After logging in, go to "Personal Center" and click "Edit Profile" to modify your personal information, including:</p>
                        <ul>
                            <li>Username and nickname</li>
                            <li>Avatar</li>
                            <li>Contact information</li>
                            <li>Bio</li>
                        </ul>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">How to contact customer service?</a>
                    <div class="accordion-content" data-tab-content>
                        <p>You can contact our customer service team through:</p>
                        <ul>
                            <li><strong>Online Support:</strong> Click the customer service icon at the bottom right of the page</li>
                            <li><strong>Email:</strong> support@example.com</li>
                            <li><strong>Phone:</strong> 400-123-4567 (Business hours 9:00-18:00)</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Nested Accordion</h3>
            <ul class="accordion bordered" data-accordion>
                <li class="accordion-item is-active" data-accordion-item>
                    <a href="#" class="accordion-title">Product Categories</a>
                    <div class="accordion-content" data-tab-content>
                        <ul class="accordion" data-accordion data-allow-all-closed="true">
                            <li class="accordion-item" data-accordion-item>
                                <a href="#" class="accordion-title">Electronics</a>
                                <div class="accordion-content" data-tab-content>
                                    <ul>
                                        <li>Phones</li>
                                        <li>Computers</li>
                                        <li>Tablets</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="accordion-item" data-accordion-item>
                                <a href="#" class="accordion-title">Home Goods</a>
                                <div class="accordion-content" data-tab-content>
                                    <ul>
                                        <li>Furniture</li>
                                        <li>Kitchenware</li>
                                        <li>Decorations</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">Services</a>
                    <div class="accordion-content" data-tab-content>
                        <p>We offer various services...</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Accordion Best Practices

Logical grouping: Group related content in the same panel
Clear titles: Use concise and clear titles
Default expansion: Consider which content should be expanded by default
Accessibility: Ensure keyboard can operate
Smooth animation: Adjust animation speed appropriately

Summary

In this chapter we learned:

Creating basic accordion
Multiple panels open and all closeable
Nested accordion
Custom styling (bordered, icons, colored)
FAQ example
Using JavaScript API

Next chapter, we will learn Foundation Lists.

Tip: Accordion is suitable for organizing large amounts of content, allowing users to view on demand and save page space.

Foundation Accordion ​

Basic Accordion ​

Multiple Panels Open ​

All Panels Closeable ​

Nested Accordion ​

Custom Styling ​

Bordered Accordion ​

Titles with Icons ​

Colored Accordion ​

FAQ Example ​

Deep Linking ​

Configuration Options ​

JavaScript API ​

Get Instance ​

Methods ​

Events ​

Complete Example ​

Accordion Best Practices ​

Summary ​

Foundation Accordion

Basic Accordion

Multiple Panels Open

All Panels Closeable

Nested Accordion

Custom Styling

Bordered Accordion

Titles with Icons

Colored Accordion

FAQ Example

Deep Linking

Configuration Options

JavaScript API

Get Instance

Methods

Events

Complete Example

Accordion Best Practices

Summary