Topic: AccordionItem
Petr Urban priority asked 9 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 9 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 9 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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