Magento 2: How to close all product tabs on Mobile

Question

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

Answer 1

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>

Answer 2

@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?

Answer 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"}}'>