We sacrifice by not doing any other technology, so that you get the best of Magento.

We sacrifice by not doing any other technology, so that you get the best of Magento.

    Follow the below steps to override default.phtml  in your theme.

    Create an default.phtml in : app/design/frontend/Vendor/Themename/Magento_Catalog/templates/product/view

    <?php if ($detailedInfoGroup = $block->getGroupSortedChildNames('detailed_info', 'getChildHtml')):?>
        <div class="product info detailed">
            <?php $layout = $block->getLayout(); ?>        
                <div class="product data items" id="accordion" data-mage-init='{"accordion":{"openedState": "opened", "collapsible": true,  "multipleCollapsible": true}}'>
                <?php foreach ($detailedInfoGroup as $name):?>
                    <?php
                        $html = $layout->renderElement($name);
                        if (!trim($html)) {
                            continue;
                        }
                        $alias = $layout->getElementAlias($name);
                        $label = $block->getChildData($alias, 'title');
                    ?>
                    <div class="data item title"
                         aria-labeledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title"
                         data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
                        <a class="data switch"
                           tabindex="-1"
                           data-toggle="switch"
                           href="#<?= /* @escapeNotVerified */ $alias ?>"
                           id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
                            <?= /* @escapeNotVerified */ $label ?>
                        </a>
                    </div>
                    <div class="data item content" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
                        <?= /* @escapeNotVerified */ $html ?>
                    </div>
                <?php endforeach;?>
            </div>
        </div>
    <?php endif; ?>
    
    
    <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.accordion({
                            openedState: "opened",
                            collapsible: false                        
                        });
                    },
                    // Switch to Mobile Version
                    exit: function () {
                        detailsTabs.accordion({
                            openedState: "opened",
                            collapsible: true,
                            active: [0,1,2,3,4],
                            multipleCollapsible: true
    
                        });
                    }
                });
            })
    </script>

     

     

    field_5bfb909c5ccae

      Get a Free Quote