FREE SALESFORCE LWC COMPONENT

Accordion

This starter keeps state local and uses native buttons so keyboard interaction can be layered in cleanly.

Component structure

COMPONENTwcsAccordion

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <lightning-accordion allow-multiple-sections-open>
    <lightning-accordion-section name="one" label="What is LWC?">
      <p>Lightning Web Components use modern web standards.</p>
    </lightning-accordion-section>
  </lightning-accordion>
</template>

JavaScript

import { LightningElement } from 'lwc';

export default class WcsAccordion extends LightningElement {}

CSS

.slds-accordion__summary{font-weight:600}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>