1

I am working on magento 2 product detail page. How can I close all the tabs on mobile view by default

Screenshot for reference

1
  • Share screenshot Jun 12, 2019 at 6:55

4 Answers 4

3

Use: data-mage-init='{"tabs":{"active":"false"}}

If you want to close the details tabs on mobile only:

Create a copy of the core details.phtml file in your local theme: app/design/frontend/{Vendor}/{Theme}/Magento_Catalog/templates/product/view/details.phtml and remove the data-mage-init='{"tabs":{"openedState":"active"}}' and add the following:

<script type="text/javascript">
        require(['jquery', 'matchMedia', 'accordion'], function($, mediaCheck) {

            var detailsTabs = $('.product.data.items');

            mediaCheck({
                media: '(min-width: 768px)',
                // Switch to Desktop Version
                entry: function () {
                    detailsTabs.tabs({
                        openedState: "active",
                        collapsible: false
                    });
                },
                // Switch to Mobile Version
                exit: function () {
                    detailsTabs.tabs({
                        openedState: "active",
                        collapsible: true,
                        active: false
                    });
                }
            });
        })
</script>
2
  • Thank you. I was stuck with this for hours. The desktop and mobile settings seemed to be ignored. I had to remove the full data-mage-init part from <div class="product info detailed"> as this prevented the desktop and mobile settings being used. Oct 19, 2023 at 13:15
  • Thanks! I case you need to have the first tab active on mobile change to active: 0
    – Sfblaauw
    Apr 10 at 9:30
3

Jake you can close all the tabs by adding below parameters:

<div class="product data items" data-mage-init='{"tabs":{"openedState":"active","active":"false","collapsible":"true"}}'>
0

@Stevie-Ray Hartog: This answers just a part of the question. With your answer I was able to close the detail tab on load, but the OP wanted also to close all tabs.

Does anyone know how to close all the tabs using the default mage-init on .product.data.items?

0

Quickfix to close all tabs as asked by OP:

Use data-mage-init='{"tabs":{"openedState":"active","collapsible":"true"}}' (as mentioned above)

Then just click programmatically on the default active tab

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.