Accordion

Overview

Accordions organize content into collapsible sections, perfect for FAQs, product details, and navigation menus.

Key Features

• Single/Multi Expand - Control how many panels can be open
• Smooth Animations - Configurable slide transitions
• Programmatic Control - Open, close, toggle panels via API

const accordion = Domma.elements.accordion('#accordion', {
    multiExpand: false,
    activeIndex: 0
});

Getting Started

Add an accordion to your page in three simple steps

Step 1: Add HTML Structure

Create the accordion HTML with .accordion container and .accordion-item elements:

<div id="my-accordion" class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">
            <span>Section 1</span>
            <span class="accordion-icon">&#9660;</span>
        </div>
        <div class="accordion-body">
            <div class="accordion-content">Content here</div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
            <span>Section 2</span>
            <span class="accordion-icon">&#9660;</span>
        </div>
        <div class="accordion-body">
            <div class="accordion-content">More content</div>
        </div>
    </div>
</div>

Step 2: Include Domma

Add Domma CSS and JavaScript to your page:

<!-- CSS -->
<link rel="stylesheet" href="dist/domma.css">
<link rel="stylesheet" href="dist/elements.css">

<!-- JavaScript -->
<script src="dist/domma.min.js"></script>

Step 3: Initialize the Accordion

Call Domma.elements.accordion() to activate the accordion:

Domma.elements.accordion('#my-accordion', {
    multiExpand: false,  // Only one panel open at a time
    activeIndex: 0       // First panel open by default
});

Note: The accordion requires the HTML structure above. The JavaScript adds interactivity, animations, and programmatic control.

Quick Start

<div id="quick-accordion" class="accordion">
    <div class="accordion-item active">
        <div class="accordion-header">
            <span>Section 1</span>
            <span class="accordion-icon">▼</span>
        </div>
        <div class="accordion-body">
            <div class="accordion-content">Content for section 1</div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
            <span>Section 2</span>
            <span class="accordion-icon">▼</span>
        </div>
        <div class="accordion-body">
            <div class="accordion-content">Content for section 2</div>
        </div>
    </div>
</div>

/**
 * Quick Start - from public/showcase/elements/accordion.
 */
export function mount(root) {
    E.accordion(root.querySelector('#quick-accordion'), {multiExpand: false, activeIndex: 0});
}

Examples

FAQ Accordion (Single Expand)

<div id="faq-accordion" class="accordion">
    <div class="accordion-item active">
        <div class="accordion-header">
            <span>What is Domma?</span>
            <span class="accordion-icon">▼</span>
        </div>
        <div class="accordion-body">
            <div class="accordion-content">A lightweight JavaScript framework with DOM, utilities, and UI
                components.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
            <span>How big is it?</span>
            <span class="accordion-icon">▼</span>
        </div>
        <div class="accordion-body">
            <div class="accordion-content">Approximately 125KB minified.</div>
        </div>
    </div>
</div>

/**
 * FAQ Accordion (Single Expand) - from public/showcase/elements/accordion.
 */
export function mount(root) {
    E.accordion(root.querySelector('#faq-accordion'), {multiExpand: false, activeIndex: 0});
}

Multi-Expand Mode

<div id="multi-accordion" class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">
            <span>Panel 1</span>
            <span class="accordion-icon">▼</span>
        </div>
        <div class="accordion-body">
            <div class="accordion-content">Multiple panels can be open simultaneously</div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">
            <span>Panel 2</span>
            <span class="accordion-icon">▼</span>
        </div>
        <div class="accordion-body">
            <div class="accordion-content">Click headers to toggle independently</div>
        </div>
    </div>
</div>

/**
 * Multi-Expand Mode - from public/showcase/elements/accordion.
 */
export function mount(root) {
    E.accordion(root.querySelector('#multi-accordion'), {multiExpand: true});
}

Best Practices

• Accessibility - Use semantic HTML, ARIA attributes for screen readers
• Clear Headers - Make accordion headers descriptive and actionable
• Initial State - Consider opening first panel by default for discoverability

API Reference

Methods

Declarative Configuration

Use Domma's config engine for declarative accordion setup with $.setup(). This approach is cleaner, more maintainable, and allows you to configure multiple components at once.

Single Accordion Setup

$.setup({
    '#my-accordion': {
        component: 'accordion',
        options: {
            multiExpand: false,
            activeIndex: 0,
            animation: 'slide'
        }
    }
});

Multiple Accordions at Once

// Configure all FAQ accordions site-wide
$.setup({
    '.faq-accordion': {
        component: 'accordion',
        options: {
            multiExpand: false,
            activeIndex: 0
        },
        events: {
            // Add click tracking
            change: (index, $item, instance) => {
                console.log(`FAQ ${index + 1} opened`);
            }
        }
    },
    '#settings-accordion': {
        component: 'accordion',
        options: {
            multiExpand: true  // Allow multiple sections open
        }
    }
});

With Initial State & Events

$.setup({
    '#product-details': {
        component: 'accordion',
        options: {
            activeIndex: 0,
            onChange: (index) => {
                // Track which section users view
                analytics.track('Product Section Viewed', {
                    section: ['specs', 'reviews', 'shipping'][index]
                });
            }
        },
        initial: {
            // Apply additional styling
            css: {
                border: '1px solid #e0e0e0',
                borderRadius: '8px'
            }
        }
    }
});

Benefits of Declarative Config

• Centralized Configuration - All component setup in one place
• Easier Maintenance - Update options without touching HTML
• Batch Operations - Configure multiple components at once
• Mutable Config - Update with $.update(), query with $.config(), reset with $.reset()

Programmatic vs Declarative

Programmatic (Traditional)

// Scattered throughout code
const acc1 = Domma.elements.accordion(
    '#accordion-1',
    {multiExpand: false}
);

const acc2 = Domma.elements.accordion(
    '#accordion-2',
    {multiExpand: true}
);

Declarative (Recommended)

// Clean, centralized config
$.setup({
    '#accordion-1': {
        component: 'accordion',
        options: {multiExpand: false}
    },
    '#accordion-2': {
        component: 'accordion',
        options: {multiExpand: true}
    }
});

CSS Customisation

Override these CSS variables to customise Accordion appearance and match your design system.

Example Override

:root {
    /* Borderless accordion */
    --dm-accordion-border: transparent;
    --dm-accordion-header-hover: rgba(0,0,0,0.02);
}

Full CSS Customisation Cheat-Sheet →

Related Elements

<div class="grid grid-cols-1 gap-4 grid-auto-fit-250"><a href="/showcase/elements/tabs" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Tabs</h3>
            <p class="card-text">Horizontal content organization</p>
        </div>
    </a>

    <a href="/showcase/elements/list-group" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">List Group</h3>
            <p class="card-text">Selectable list items as a flat alternative to accordion sections.</p>
        </div>
    </a>
</div>