I want all product data tabs on the product details page to be collapsed by default.
I edited this line in

<div class="product data items" data-mage-init='{"tabs":{"openedState":"active", "active":"false"}}'>

This does what I want but with the following problem:

On page load the reviews tab is expaned, for a short time. It then gets closed during page load and after the page has rendered all tabs are collapsed.

This creates a visual effect that I don't like.

How can I make all tabs be collapsed from the start instead.

Here's the rest of the template, should be Magento default though apart from my change:

/** @var \Magento\Catalog\Block\Product\View\Details $block */
<?php if ($detailedInfoGroup = $block->getGroupSortedChildNames('detailed_info', 'getChildHtml')) :?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>
        <div class="product data items" data-mage-init='{"tabs":{"openedState":"active", "active":"false"}}'>
            <?php foreach ($detailedInfoGroup as $name) :?>
                $html = $layout->renderElement($name);
                if (!trim($html)) {
                $alias = $layout->getElementAlias($name);
                $label = $block->getChildData($alias, 'title');
                <div class="data item title"
                     data-role="collapsible" id="tab-label-<?= $block->escapeHtmlAttr($alias) ?>">
                    <a class="data switch"
                       href="#<?= $block->escapeUrl($alias) ?>"
                       id="tab-label-<?= $block->escapeHtmlAttr($alias) ?>-title">
                        <?= /* @noEscape */ $label ?>
                <div class="data item content"
                     aria-labelledby="tab-label-<?= $block->escapeHtmlAttr($alias) ?>-title" id="<?= $block->escapeHtmlAttr($alias) ?>" data-role="content">
                    <div class="product-data-tab-wrapper">
                        <div class="product-data-tab-content"><?= /* @noEscape */ $html ?></div>
            <?php endforeach;?>
<?php endif; ?>
<script type="text/x-magento-init">
    "*": {
        "productDetails": {}

1 Answer 1


On the page load You can add below less in your custome theme

.product {
    &.info {
        &.detailed {
            .product.data.items {
                > .item.content {
                    display: none;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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