An LWC for SLDS's expandable section?

Question

The SLDS Expandable Section has a distinct background filled header whereas the SLDS Accordion has a horizontal line.

I don't see an LWC for an expandable section but do see an LWC for an accordion section lightning-accordion-section but that LWC does not appear to support the expandable section styling.

Before I write my own expandable section LWC (I know it's not complicated but would want e.g. keyboard navigation to work), is there already an LWC for this?

Answer 1

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;
    }
}