🎯 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.
✨ 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.
📌 Conclusion
Salesforce LWC Accordion is a flexible and accessible solution for creating collapsible content areas in Lightning Web Components. With support for data-driven configuration, slot-based content, animated transitions, and programmatic control, it can be used across a wide range of Salesforce applications while maintaining a clean and modern user experience.
