Lightning-accordion not collapse

Question

I have a lightning-accordion that works outside a table, but when I tried to put inside a column in a table it doesn't collapse, it's possible to do that?

<table class="slds-table slds-table_cell-buffer slds-table_bordered">
     <thead>
       <tr class="slds-line-height_reset">
           <th class="" scope="col">
              <div class="slds-truncate" title="Product">Product</div>
           </th>
           <th class="" scope="col">
              <div class="slds-truncate" title="Last sale">Last sale</div>
           </th>
       </tr>
      </thead>
      <tbody>
        <template for:each={products} for:item="productItem">
           <tr class="slds-hint-parent" key={productItem.Id}>
              <td class="product-accordion">
                <lightning-accordion active-section-name={activeSections} onsectiontoggle={handleSectionToggle}>
                  <lightning-accordion-section name={productId} label={productName}>
                     <template if:true={hasBatch}>  
                       <lightning-datatable
                        key-field="id"
                        data={batches}
                        columns={columns}
                        suppress-bottom-bar
                        hide-checkbox-column="true"
                        draft-values={draftValues}
                        onsave={handleSave}>
                </lightning-datatable>
                </template>
            </lightning-accordion-section> 
</lightning-accordion>
              </td>
              <td>
                <div class="slds-truncate">R$ 0,00</div>
              </td>
           </tr>
        </template>
     </tbody>
 </table>

JS:

@api productId;
@api productName;
activeSections = null;
sectionProduct = '';
hasBatch = false; 
columns = columns;
draftValues = [];

connectedCallback(){
    this.activeSections = null;
}

handleSectionToggle(event) {
    this.sectionProduct = event.detail.openSections;
    this.getBatches(this.sectionProduct);
}

getBatches(product) {
    getBatches()
    .then((result) => {
        this.batches = result.filter(item => { return item.Product__c == product } )
        if(this.batches.length > 0){
            this.hasBatch = true;
        }
        else {
            this.hasBatch = false;
        }
    })
    .catch((error) => {
        console.log('Error '+error);
    })
    .finally(() => {
        this.viewProducts = true;
    });
}

async handleSave( event ) {
    const updatedFields = event.detail.draftValues;
}

Answer 1

The issue here is not due to accordion inside table column. If a accordion has only one section then it will always remain open for accordion without allow-multiple-sections-open attribute.

There are two types of accordions in LWC:

1. Accordions with single section open at a time : For these types of accordions , if a single section is present then it does NOT get collapsed and remains open.

2. Accordions with multiple sections open at a time : For these types of accordions , if a single section is present then it is possible to collapse and expand it.

From your code , it is inferred that there would be 1 accordion section per iteration.

In that case , just add allow-multiple-sections-open attribute to lightning-accordion component as below :

<lightning-accordion allow-multiple-sections-open active-section-name={activeSections} onsectiontoggle={handleSectionToggle}>

Reference : https://developer.salesforce.com/docs/component-library/bundle/lightning-accordion/specification