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">
       <tr class="slds-line-height_reset">
           <th class="" scope="col">
              <div class="slds-truncate" title="Product">Product</div>
           <th class="" scope="col">
              <div class="slds-truncate" title="Last sale">Last sale</div>
        <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}>  
                <div class="slds-truncate">R$ 0,00</div>


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

    this.activeSections = null;

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

getBatches(product) {
    .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;
  • Although I have answered the question below , I did not understand the need of accordion in a table. Datatable can be directly shown.
    – Rohit
    Mar 22, 2023 at 10:36

1 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

You must log in to answer this question.

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