Not sure if I'll use this as it turns out that the filled background only applies when the title has e.g. focus or hover. So the main differences of this compared to using lightning-accordion-section
are:
- No horizontal lines between sections
- On focus/hover/etc, this acts like a full width button rather than a link
But FYI:
<template>
<div class={sectionClass}>
<h3 class="slds-section__title">
<button class="slds-button slds-section__title-action" onclick={handleClick}>
<lightning-icon
icon-name="utility:switch"
class="slds-button__icon slds-button__icon_left slds-section__title-action-icon"
size="x-small"
></lightning-icon>
<span class="slds-truncate" title={label}>{label}</span>
</button>
</h3>
<div class="slds-section__content">
<slot></slot>
</div>
</div>
</template>
and:
import { LightningElement, api } from 'lwc';
/**
* Implement slds-section.
*/
export default class ExpandableSection extends LightningElement {
@api open;
@api label;
get sectionClass() {
return this.open ? 'slds-section slds-is-open' : 'slds-section';
}
connectedCallback() {
if (typeof this.open === 'undefined') this.open = true;
}
handleClick() {
this.open = !this.open;
}
}