Accordion Components

Basic Accordion

An accordion is a UI element that can be expanded or collapsed to reveal or hide content. It's commonly used for FAQs, navigation menus, and content organization.

This implementation provides smooth animations, keyboard accessibility, and customizable styles.

To use the accordion:

Add the accordion structure to your HTML
Include the accordion.js script
Style as needed with the provided CSS classes

The accordion will automatically initialize itself on page load.

Yes! This accordion implementation follows accessibility best practices:

Proper ARIA attributes for screen readers
Keyboard navigation support
Focus management
Semantic HTML structure

HTML Structure:

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header">
            <span>Accordion Title</span>
            <i class="fas fa-chevron-down transition-transform"></i>
        </button>
        <div class="accordion-content">
            <div class="accordion-body">
                Your content goes here...
            </div>
        </div>
    </div>
    
    <!-- More accordion items -->
</div>

Accordion Variants

Bordered Accordion

This variant adds borders between each accordion item for better visual separation.

Perfect for FAQ sections and content organization where visual separation is important.

Filled Accordion

This variant uses background colors to make the headers stand out.

Great for navigation menus or when you want to draw attention to the accordion.

Variant Examples:

<!-- Bordered Accordion -->
<div class="accordion accordion-bordered">
    <!-- Accordion items -->
</div>

<!-- Filled Accordion -->
<div class="accordion accordion-filled">
    <!-- Accordion items -->
</div>

Advanced Features

Multiple Open Items

This accordion allows multiple items to be open at the same time.

Try opening this item while the one above is already open!

All three can be open simultaneously.

Accordion with Custom Icons

This accordion uses custom open/close icons and header icons for better visual cues.

The plus/minus icons provide clear indication of expandable content.

Multiple Open Items:

<!-- Allow multiple items to be open -->
<div class="accordion" data-allow-multiple="true">
    <!-- Accordion items -->
</div>

Custom Icons:

<div class="accordion accordion-custom-icon">
    <div class="accordion-item">
        <button class="accordion-header">
            <span><i class="fas fa-user text-blue-600 mr-2"></i> User Settings</span>
            <i class="fas fa-plus text-blue-600 accordion-icon-closed"></i>
            <i class="fas fa-minus text-blue-600 accordion-icon-open hidden"></i>
        </button>
        <div class="accordion-content">
            <div class="accordion-body">
                Content goes here...
            </div>
        </div>
    </div>
</div>

API Reference

CSS Classes

Class	Description
`.accordion`	Main container for accordion
`.accordion-item`	Individual accordion item
`.accordion-header`	Clickable header/toggle button
`.accordion-content`	Container for collapsible content
`.accordion-body`	Inner content area with padding
`.accordion-bordered`	Variant with borders between items
`.accordion-filled`	Variant with colored headers

JavaScript API:

// Initialize all accordions
document.addEventListener('DOMContentLoaded', function() {
    TwAccordion.init();
});

// Get specific accordion instance
const accordion = TwAccordion.getInstance('#myAccordion');

// Control accordion programmatically
accordion.open(0);    // Open first item
accordion.close(0);   // Close first item
accordion.toggle(0);  // Toggle first item
accordion.openAll();  // Open all items (if multiple allowed)
accordion.closeAll(); // Close all items

// Listen for accordion events
document.querySelector('#myAccordion').addEventListener('accordion:open', function(e) {
    console.log('Item opened:', e.detail.index);
});

Customization

Styling Tips:

Customize colors by modifying the accordion CSS variables
Add custom animations by overriding the transition properties
Use the data-allow-multiple attribute to allow multiple open items
Add your own icons or replace the default chevron
Create nested accordions for hierarchical content

Accordion Component Documentation