1

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

Improve this question
1

2 Answers 2

Reset to default
0

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

Improve this answer
0
0

You can add below code in your phtml

<div class="product info detailed">
    <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
        <div class="data item title"
             data-role="collapsible" id="tab-label-1">
            <a class="data switch"
               tabindex="-1"
               data-toggle="trigger"
               href="#temp-1"
               id="tab-label-1-title">
                <?= __("Tab 1"); ?>
            </a>
        </div>
        <div class="data item content"
             aria-labelledby="tab-label-1-title" id="temp-1" data-role="content">
            <?= __("Hello Tab 1 Text"); ?>
        </div>
        <div class="data item title"
             data-role="collapsible" id="tab-label-2">
            <a class="data switch"
               tabindex="-1"
               data-toggle="trigger"
               href="#temp-2"
               id="tab-label-2-title">
                <?= __("Tab 2"); ?>
            </a>
        </div>
        <div class="data item content"
             aria-labelledby="tab-label-2-title" id="temp-2" data-role="content">
            <?= __("Hello Tab 2 Text"); ?>
        </div>
    </div>
</div>

Hope this will helps you!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.