Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

Petr Urban priority asked 11 months ago


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


Bartosz Cylwik staff answered 11 months ago


Hi! Try searching for not collapsed accordion-button elements and dispatch click event for them. That should do the trick

const collapseAll = () => {
  const els = document.querySelectorAll(
    ".accordion-button:not(.collapsed)"
  );

  els.forEach((el) => {
    el.dispatchEvent(new Event("click"));
  });
};

Petr Urban priority commented 11 months ago

Dear Bartosz, thank you very much. I made it using switch and the following logic:

watch(collapseSwitch, (collapseSwitch, prevCollapseSwitch) => {
  let els;
  if (collapseSwitch) {
    // console.log("AAA");
    els = document.querySelectorAll(
        "button.accordion-button.collapsed"
    );
  } else {
    // console.log("BBB");
    els = document.querySelectorAll(
        "button.accordion-button:not(.collapsed)"
    );
  }
  // console.log("length = " + els.length);
  els.forEach((el) => {
    // console.log("Accordion: " + el);
    el.dispatchEvent(new Event("click"));
  });
})

BR, Petr



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: MacBook
  • Browser: Chrome
  • OS: Mac OS Ventura 13.6.3
  • Provided sample code: No
  • Provided link: No