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

Screenshot for reference


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');

                media: '(min-width: 768px)',
                // Switch to Desktop Version
                entry: function () {
                        openedState: "active",
                        collapsible: false
                // Switch to Mobile Version
                exit: function () {
                        openedState: "active",
                        collapsible: true,
                        active: false

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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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