Magento – Magento 2:- How to create Vertical or Horizontal tagging with Tabs widget

jquerymagento2requirejswidgets

I tried to create tabbing using Tabs widget but It does not display what i want.
I follow this Link:- Tab widget and Building Tabbed Interface with Magento 2 Javascript UI

Widget/Modal/view/frontend/layout/modal_index_tabwidget.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="mage/tabs.js"/>
    </head>
     <body>     
        <referenceContainer name="content">         
            <block class="Widget\Modal\Block\Index\Index" name="index_tabwidget" template="index/tab_widget.phtml">
            </block>
        </referenceContainer>      
    </body>
</page>

Widget/Modal/view/frontend/templates/index/tab_widget.phtml

    <div data-mage-init='{"collapsible":{ "active": false, "animate": 200, "collapsible": true}}'>
         <div data-role="title">Show hidden</div>
         <div data-role="content">
              The Magento collapsible widget converts a header/content pair into an accordion, where the content is collapsed or expanded on the header click.
               Unlike the accordion widget is that collapsible is initialized for one title/content pair, while accordion can be initialized for a set of title/contents pairs.
         </div>
    </div>
    <===================================================================================>
    <div id="horizontal_tabs">
         <ul>
              <li><a href="#fragment-1"><span>What is Accordion</span></a></li>
              <li><a href="#fragment-2"><span>What is Collapsible</span></a></li>
              <li><a href="#fragment-3"><span>What is Tabs</span></a></li>
         </ul>
         <div id="fragment-1">
              <p>Magento accordion widget is an extension of the Magento Tabs widget. Accordions are generally used to break content into multiple sections that can be swapped to save space</p>
         </div>
         <div id="fragment-2">
              <p>The Magento collapsible widget converts a header/content pair into an accordion, where the content is collapsed or expanded on the header click.</p>
              <p>Unlike the accordion widget is that collapsible is initialized for one title/content pair, while accordion can be initialized for a set of title/contents pairs.</p>
         </div>
         <div id="fragment-3">
              <p>The Magento tabs widget implements single content area with multiple panels, each associated with a header in a list. It uses the Magento collapsible widget.</p>
         </div>
    </div>

    <br/>
    <h3>
        <a href="<?php echo $block->getBaseUrl().'modal/index/index' ?>" >Back</a>
    </h3>
    <script type="text/javascript">
    require([
     'jquery',
     'jquery/ui'
     ],
     function($, tabs) {
          $("#horizontal_tabs").tabs();
     }
);
    </script>

I want output like below if someone knows then please help me.
enter image description here

Best Answer

Please read blog. Hope it will helps to you : https://hweb87.wordpress.com/2015/10/10/add-responsive-tab-with-carousel-in-magento2/

Related Topic