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.