🎯 Collapsible Accordion for Salesforce LWC

A reusable, accessible, animated accordion component for Lightning Web Components with support for single-expand, multi-expand, slot-based composition, and programmatic control.

📖 Project Overview

Salesforce LWC Accordion is a fully reusable Lightning Web Component designed to create modern, responsive, and accessible accordion interfaces.

The component supports both single-expand and multi-expand modes, animated transitions, programmatic APIs, optional icons and badges, and slot-based content composition.

Whether you're displaying account details, forms, datatables, dashboards, FAQs, or complex business content, this accordion provides a flexible and scalable solution for Salesforce applications.

Salesforce-LWC-Accordion-Architecture-Diagram

🔗 View Source Code ⬇ Download ZIP

✨ Key Features

Feature	Description
Single Expand Mode	Opening one section automatically closes others.
Multi Expand Mode	Multiple sections can remain open simultaneously.
Expand All / Collapse All	Bulk control of accordion sections.
Smooth Animations	CSS-based expand/collapse transitions.
Animated Chevron	Visual indicator rotates automatically.
Slot-Based Composition	Supports tables, forms, charts, and custom markup.
Data-Driven API	Generate sections dynamically using JavaScript arrays.
Accessibility Ready	ARIA-compliant and keyboard-friendly.

🏗 Architecture

Parent Component
        │
        ▼
c-accordion
        │
        ├── State Management
        ├── Multi Expand Logic
        ├── Programmatic API
        │
        ▼
c-accordion-section
        │
        ├── Header
        ├── Chevron
        ├── Badge
        ├── Icon
        └── Content Panel

📁 Project Structure

salesforce-lwc-accordion
│
├── README.md
│
└── force-app
    └── main
        └── default
            └── lwc
                ├── accordion
                │   ├── accordion.html
                │   ├── accordion.js
                │   ├── accordion.css
                │   └── accordion.js-meta.xml
                │
                ├── accordionSection
                │   ├── accordionSection.html
                │   ├── accordionSection.js
                │   ├── accordionSection.css
                │   └── accordionSection.js-meta.xml
                │
                └── accordionDemo
                    ├── accordionDemo.html
                    ├── accordionDemo.js
                    └── accordionDemo.js-meta.xml

💻 Data-Driven Usage (Recommended)

<c-accordion
    title="Account Information"
    sections={mySections}
    allow-multi-expand={isMultiExpand}
    active-section-names={defaultOpen}
    onsectiontoggle={handleToggle}>
</c-accordion>

JavaScript Configuration

mySections = [
{
    name: 'details',
    label: 'Account Details',
    iconName: 'utility:account',
    content: 'Core account information.'
},
{
    name: 'contacts',
    label: 'Contacts',
    iconName: 'utility:people',
    badge: '5',
    content: 'Associated contacts.'
}
];

🎨 Slot-Based Composition

<c-accordion-section icon-name="utility:opportunity" is-open="" label="Opportunity Summary" name="summary">
    <lightning-datatable columns="{columns}" data="{tableData}" key-field="id">
    </lightning-datatable>
</c-accordion-section>

⚙️ Programmatic Control API

Method	Description
expandSection(name)	Open a section programmatically.
collapseSection(name)	Close a section programmatically.
getOpenSections()	Returns all currently expanded sections.

Example

openContacts() {
    this.refs.myAccordion.expandSection('contacts');
}

logOpen() {
    const openSections =
        this.refs.myAccordion.getOpenSections();
}

📦 Section Object Schema

{
    name: String,
    label: String,
    content: String,
    iconName: String,
    badge: String,
    isDisabled: Boolean
}

📢 Events

Event	Purpose
sectiontoggle	Triggered whenever sections open or close.
toggle	Fired by individual accordion sections.

♿ Accessibility Features

Native button-based interaction
aria-expanded support
aria-controls support
role="region" implementation
aria-disabled support
Keyboard navigation (Tab, Enter, Space)
Visible focus indicators
Screen reader friendly design

🎨 CSS Custom Properties

c-accordion {
    --accordion-section-max-height: 600px;
}

🚀 Deployment

sf org login web --alias my-org

sf project deploy start \
--source-dir force-app/main/default/lwc/accordion \
--source-dir force-app/main/default/lwc/accordionSection \
--target-org my-org

🎯 Benefits

Reusable across multiple Salesforce projects.
Supports both simple and complex content layouts.
Fully configurable using metadata and JavaScript.
Provides enterprise-grade accessibility.
Clean architecture with reusable APIs.
Smooth user experience with animations.
App Builder and Flow Screen compatible.