3

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

HTML:

    <template if:true={resp}>
            <!--Header of the whole accordion component-->
            <lightning-accordion class="resp-accordion"
                            allow-multiple-sections-open
                            onsectiontoggle={handleSectionToggle}
                            active-section-name={activeSections}>
                    <div>        
                    <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>
                    </div>

            <!--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">
                    <p>{item.Description__c}</p>
                    </div>

                </lightning-accordion-section>
            </template>
        </lightning-accordion>
        </template>

JS:

    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

2

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 .