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>

<?php if ($detailedInfoGroup = $block->getGroupSortedChildNames('detailed_info', 'getChildHtml')):?>

<?php $layout = $block->getLayout(); ?>

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

<?php endif; ?>

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>

Fill the below form if you have any Magento programming need.

Magento 2 : Get request params in your controller file
If you want get query string params in controller file,...
Magento 2 : Redirect custom page after login using plugin
Create di.xml and add the below code Magemonkey/Redirect/etc/frontend/di.xml [crayon-62847713d72c9538506388/] Create...
Magento 2 – How to change local date to UTC date?
You can try below code to change local date to...
How to change order status using cron?
Step 1: First you need to add registration.php file in...
Magento 2: How to add close button on error and success message?
Step1 : Override message.js in current theme file on the...

Author Info

Magento 2 Developer

Hire H. Shingala

Fill the form & Get Installation Support

Magento 2: How to open all product tabs in mobile view by default?

Recent Articles

Author Info

Get a Free Quote

Connect With Us