cancel
Showing results for 
Search instead for 
Did you mean: 

How to use tabs widget in magento2

SOLVED
   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

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

1 ACCEPTED SOLUTION

Accepted Solutions

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

View solution in original post

4 REPLIES 4

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 ?