I am trying to get a different behaviour of the product tabs/accordion on desktop vs. mobile.
I use the matchMedia function to do so.
So in the desktop part I use:
entry: function () {
$('.product.data.items').accordion({
openedState: "active",
collapsible: false,
multipleCollapsible: false,
active: true
});
}
and for the mobile part I use:
exit: function {
$('.product.data.items').accordion({
openedState: "active",
collapsible: true,
active: true,
multipleCollapsible: true
});
}
This works, when you load the page the first time. Especially the "multipleCllapsible" part. So, when you load the page in mobile view, the tabs are collapsible and multiple tabs are collapsible. It also works, if you load the page in desktop mode but with the opposite behavior.
However, if you resize the page, the behavior of the accordion does not change. It stays with whatever view (mobile or desktop) you had, when you loaded the page.
I even tried to use $('.product.data.items').accordion('destroy');
in the entry/exit function of mediaCheck, but that does not help either.
Is there a possibility to change the accordion behavior after resizing the page?