<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @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"}}'>
            <?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"
                     data-role="collapsible" id="tab-label-<?= $block->escapeHtmlAttr($alias) ?>">
                    <a class="data switch"
                       tabindex="-1"
                       data-toggle="trigger"
                       href="#<?= $block->escapeUrl($alias) ?>"
                       id="tab-label-<?= $block->escapeHtmlAttr($alias) ?>-title">
                        <?= /* @noEscape */ $label ?>
                    </a>
                </div>
                <div class="data item content"
                     aria-labelledby="tab-label-<?= $block->escapeHtmlAttr($alias) ?>-title" id="<?= $block->escapeHtmlAttr($alias) ?>" data-role="content">
                    <?= /* @noEscape */ $html ?>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>


<script type="text/javascript">
    require(['jquery','jquery/ui'], function($) {
        $("div.product.data.items").tabs();
    });
</script>