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

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

Answer 3

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

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