Switch between accordion behavior on resize not working properly

Question

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?

Answer 1

Show use the code where you've added an event listener to respond to changing window size.

Answer 2

I was not able to get the behaviour I wanted with accordion/tab. So I dismissed the whole accordion/tab library and created an own javascript, that imitates the behavior with class changes/toggles, depending on the screensize. Here is my phtml and my js file:

phtml:

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var \Magento\Catalog\Block\Product\View\Details $block */
?>
<?php if ($detailedInfoGroup = $block->getGroupSortedChildNames('detailed_info', 'getChildHtml')):?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>
        <div class="product data items">
            <?php $countitems=0; ?>
            <?php foreach ($detailedInfoGroup as $name):?>
                <?php
                $active = ($countitems == 0) ? "active" : "";
                $countitems++;
                $html = $layout->renderElement($name);
                if (!trim($html)) {
                    continue;
                }
                $alias = $layout->getElementAlias($name);
                $label = $block->getChildData($alias, 'title');
                ?>
                <div class="data item title <?= $block->escapeHtml($active);?>"
                     data-role="collapsible" id="tab-label-<?= $block->escapeHtmlAttr($alias) ?>">
                    <div class="data switch">
                        <?= /* @noEscape */ $label ?>
                    </div>
                </div>
                <div class="data item content <?= $block->escapeHtml($active);?>"
                id="<?= $block->escapeHtmlAttr($alias) ?>">
                    <?= /* @noEscape */ $html ?>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>

js:

require(['jquery'], function ($) {

  var media = 1024;
  var tabscontainer = $('.product.data.items');
  tabscontainer.find('.title').click(function () {
      var windowSize = $(window).width();

      if (windowSize >= media) {
          tabscontainer.find('.title').removeClass('active');
          $(this).addClass('active');
          tabscontainer.find('.content').removeClass('active');
          $(this).next('div').addClass('active');
      }
      else {
          $(this).toggleClass('active');
          $(this).next('div').toggleClass('active');
      }
  });

  $(window).resize(function () {
      var windowSize = $(window).width();
      if (tabscontainer.find('.title.active').length != 1) {
        if (windowSize >= media) {
            tabscontainer.find('.title').removeClass('active');
            tabscontainer.find('.content').removeClass('active');
            tabscontainer.find('.title:first').addClass('active');
            tabscontainer.find('.title:first').next('div').addClass('active');
        }
      }
  });

});