cancel
Showing results for 
Search instead for 
Did you mean: 

How to use tabs widget in magento2

SOLVED

How to use tabs widget in magento2

Hello,

 

I am stuck in using tabs widget in Magento2. I have not found any resource that teachs about this. The only resource is this: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_tabs.html. But this is useless. It is only a reference of options and methods, but not how to use it.

 

I have this in attributes.phtml of my custom theme:

 

    <div id="Tabs1">
        <ul>
            <?php $count = 0 ?>
            <?php foreach ($_additional as $_data): ?>
                <li data-role="title"><a href="#tabs-<?php echo ++$count ?>"><?php echo $block->escapeHtml(__($_data['label'])) ?></a></li>
            <?php endforeach; ?>
        </ul>
        <?php $count = 0 ?>
        <?php foreach ($_additional as $_data): ?>
            <div id="tabs-<?php echo ++$count ?>" data-role="content">
                <p><?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></p>
            </div>
        <?php endforeach; ?>
    </div>

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

But that does not work. Can you show me where is the error, please?

 

Thanks

Jaime

Tags (2)
4 REPLIES

Re: How to use tabs widget in magento2

See, for example, how to add a tab to a frontend product view: https://mage2.pro/t/383

Re: How to use tabs widget in magento2

Thanks, apparently it works when I followed link 1 instructions, however I have problema with styles now. I was trying to locate where the styles are placed so the tabs would be displayed as the example but I could not.

 

Can you give me further help, please?

 

Thanks

Jaime

Re: How to use tabs widget in magento2

It looked ugly because I have not included default css files.

Re: How to use tabs widget in magento2

How did you added the css ?