How to use tabs widget in magento2

Question

I am stuck in using tabs widget in Magento2. I have not found any resource that teaches about this. The only resource is this: DevDocs 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

Answer 1

You have error on the page because you miss your tabs widget in dependencies list (at list if you want to use Magento's tabs widget).

Correct:

require([
 'jquery',
 'mage/tabs'
], function($){

But I can suggest more convenient way:

<div data-mage-init='{"mage/tabs":{}}'>
 <ul>
 <?php foreach ($_additional as $_key => $_data): ?>
 <li data-role="title"><a href="#tabs-<?php echo $_key ?>">...
 <?php endforeach; ?>
 </ul>
 <?php foreach ($_additional as $_key => $_data): ?>
 <div id="tabs-<?php echo $_key ?>" data-role="content">
 ...
 </div>
 <?php endforeach; ?>
</div>

mage/tabs.js will be loaded by Magento's App and initialized on needed element.

• jstuardo: Thanks but it did not work. It does simply nothing. By the way, jquery/ui includes tabs widget as I have checked in jquery-ui.js. But i tested both ways. After page is loaded, the data-mage-init attribute is removed which indicates something is happening, but that is the only behaviour. I tried also what appears in this page: github.com/magento/magento2/blob/c58d2d/app/code/Magento/…. But it did not work either. Not even errors are shown in console output.
• jstuardo: The problem was that I have not included default css styles. I included them and it looks pretty now :-)
• simonthesorcerer: How do you include those styles?

Answer 2

Works for me if I remove the second $(function () {}) wrap like so:

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

Answer 3

Follow this url to solve the widget tab.

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_tabs.html

for active class css

.nav-tabs li[aria-expanded="true"]{background:#f26c4f !important;} .nav-tabs li[aria-expanded="true"] a{background:#f26c4f !important;color:#fff !important;}