Dear MDB,

I have one Accordion with some AccordionItems generated using v-for. I would like to create button to be able to collapse all AccordionItems using one click.

I know how to collapse one AccordionItem programatically using the v-model value, but the option "stayOpen" must be removed from the Accordion element. Otherwise this is not working.

Is this possible?

Following is my code which is not working:

<div v-for="records in filteredResults" :key="records['index']" class="mt-4">
  <MDBRow>
    <MDBCol>
      <MDBAccordion v-model="activeItem" flush stayOpen>
        <MDBAccordionItem tag="MDBRow"
                          :headerTitle="records['entity_type'] + ' - ' + records['entity_type_qlfr']"
                          :collapseId="'accordionItem' + records['index']">
            <MDBCol>
              <MDBDatatable v-bind:id="'myTable_' + records['entity_type_qlfr']"
                            v-bind:data-cy="'myTable_' + records['entity_type_qlfr']"
                            :dataset="records"
                            :search="searchData"
                            sm
                            bordered
                            hover
                            :entries=50
                            class="text-center datatableSmart">
              </MDBDatatable>
            </MDBCol>
        </MDBAccordionItem>
      </MDBAccordion>
    </MDBCol>
  </MDBRow>

</div>

setup(props) {
    const allRecords = ref("");
    const activeItem = ref("");

    const setActive = (i) => {
      activeItem.value = 'accordionItem' + i;
      console.log("Collapsing accordion: " + activeItem.value);
      return activeItem.value;
    }

    const collapseAll = () => {
      for (let i = 0; i < allRecords.value.length; i++) {
        // activeItem.value = 'accordionItem' + i.toString();
        setActive(i);
    }
}

  return {
    allRecords,
    activeItem,
    collapseAll,
  };
},

BR, Petr