I'm trying to add a button on an accordion component that expands all sections when clicked. My Collapse All button works correctly, but I can't get the Open All to work.

I'm pretty sure the problem is in the javascript, where I set "this.activeSections = this.resp;" What's the correct way to write this? Thanks


    <template if:true={resp}>
            <!--Header of the whole accordion component-->
            <lightning-accordion class="resp-accordion"
                    <p>Open a section by clicking on it, or: </p>
                        <lightning-button onclick={handleOpenAll} label="Open All" title="openAll"></lightning-button>
                        <lightning-button onclick={handleCollapseAll} label="Collapse All" title="collapseAll"></lightning-button>
                        <p>Active sections = {openSectionList}</p>

            <!--Accordion section iterates through all the responsibilities for the role-->
            <template for:each={resp} for:item="item">
                <lightning-accordion-section name={item.Name} label={item.Name} key={item.Id}>

                    <div class="slds-p-left_x-large">



    import { LightningElement, api, track, wire } from 'lwc';
    import getResponsibilities from '@salesforce/apex/AORMetricsController.getResponsibilities';

    export default class ResponsibilitiesCollapsible extends LightningElement {
    @api recordId //this is the AOR__c Id
    @track resp = []; //this is the list of responsibilities 
    @track activeSections = []; //this controls which sections are expanded
    @track openSectionList = '';
    @track error;

    @wire(getResponsibilities, {aorId: '$recordId'})
    wireResponsibilities({error, data}) {
        if (data) {
            this.resp = data;
            this.error = undefined;
        } else (error) {
            this.resp = undefined;
            this.error = error;

    handleSectionToggle(event) {
       this.openSectionList = event.detail.openSections.join(', ');
        //Expand or Collapse All actions
    handleOpenAll(event) {
        this.activeSections = this.resp;
    handleCollapseAll(event) {
        this.activeSections = [];


1 Answer 1


You need to use the accordion section's name, so:

this.activeSections = this.resp.map(resp=>resp.Name);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .