Accordion

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
});

FAQ Accordion (Single Expand)

Multi-Expand Mode

• 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

Methods

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

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

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

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