How to Use Magento Tabs Widget:- In this blog I’m going to explain you how we can use default magento tabs widgets in our custom modules.
Step-1 : In template or phtml file add below html content.
<div id="tab_element"> <ul class="tabs-horiz" > <li> <a href="#tab1_content"> <span> <?php echo __("Tab1"); ?> </span> </a> </li> <li> <a href="#tab2_content"> <span> <?php echo __("Tab2"); ?> </span> </a> </li> <li> <a href="#tab3_content"> <span> <?php echo __("Tab3"); ?> </span> </a> </li> <li> <a href="#tab4_content" > <span> <?php echo __("Tab4"); ?> </span> </a> </li> </ul> </div> <div id="tab_element_content"> <div id="tab1_content" > <div> <div>Tab 1 content goes here....</div> </div> </div> <div id="tab2_content" > <div> <div>Tab 2 content goes here....</div> </div> </div> <div id="tab3_content" > <div> <div>Tab 3 content goes here....</div> </div> </div> <div id="tab4_content" > <div> <div>Tab 4 content goes here....</div> </div> </div> </div>
Step-2 : Initialize the tab widget.
<script> require(["jquery","mage/backend/tabs"], function($){ $(function() { $('#tab_element').tabs({ active: 'tab1_content', // active tab elemtn id destination: '#tab_element_content', // tab content destination element id shadowTabs: [] }); }); }); </script>
Now you can see tab element like below image.
In this way you can add tabs in your custom module. Hope it will be helpful for you.
Thanks and if have any query then comment below.
4 comments
Please drop us a mail regarding the issues that you are facing on [email protected] so that the team can check and assist you accordingly.
Thanks