I want to show these tabs on front end in custom product list page. On the click of these tabs the related content will show.

Refer Image Here

  • you can call a static block right below the image section on pdp page and then you can provide url on click of which the related tab content will show
    – Pramod
    Jul 6 '20 at 11:49
  • Thanks for reply. You mean to say i have to create different static blocks for every link?
    – tamanna
    Jul 6 '20 at 12:05
  • no just a single block and different static page for each section
    – Pramod
    Jul 6 '20 at 12:07
  • and this is just a suggestion as there are lot of ways to achieve one things everyone has different thinking and ideas
    – Pramod
    Jul 6 '20 at 12:07
  • @tamanna please check my answer and update me.
    – Msquare
    Jul 7 '20 at 5:13

Try this code

<div class="product data items" data-mage-init='{"mage/tabs": {"openedState": "active"}}'>
    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-white">White</a>
    <div id="tab-white" class="item content" data-role="content">white content</div>

    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-gold">Gold</a>
    <div id="tab-gold" class="item content" data-role="content">Gold content</div>

    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-silver">Silver</a>
    <div id="tab-silver" class="item content" data-role="content">Silver Content</div>

you can call multiple phtml files into this content of like this

    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-custom">Custom title</a>
    <div id="tab-custom" class="item content" data-role="content">
            echo $this->getLayout()->createBlock("VendoreName\ModuleName\Block\CustomerBlockName")->setTemplate("VendoreName_ModuleName::customtab.phtml")->toHtml();

you can add multiple tab and also add your class name to apply your custom css.

Tab Source link

Call phtml file link

I Hope This Helps You.


I add this tabs by adding this code

<div class="tab">
<ul class="tabs">
    <li><a href="#">Tab01</a></li>
    <li><a href="#">Tab02</a></li>
    <li><a href="#">Tab03</a></li>
</ul> <!-- / tabs -->

<div class="tab_content">

    <div class="tabs_item">
        <h4>Tab 01 Neque ipsum dolor.</h4>
        <p>Consectetur adipisicing elit. Neque, repellat facilis totam ab eos distinctio sint atque maiores! Dignissimos, molestiae, rem accusantium iure vitae voluptatum voluptas repudiandae deserunt dolore quis! Quisquam mollitia eius sed.</p>
    </div> <!-- / tabs_item -->

    <div class="tabs_item">
        <h4>Tab02 Maiores, suscipit</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, suscipit, eaque asperiores neque numquam nam possimus dolorem ipsa aspernatur reiciendis?</p>
    </div> <!-- / tabs_item -->

    <div class="tabs_item">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, excepturi, minima, corporis deserunt quia quae sit officiis labore inventore autem a delectus consequuntur voluptatem modi eligendi similique sed nam vitae.</p>
    </div> <!-- / tabs_item -->
</div> <!-- / tab_content -->
</div> <!-- / tab -->

And for slide up/down content i added jquery

require(['jquery'], function($){
'use strict';

$(document).ready(function() { 

    (function ($) { 
      $('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
        $('.tab ul.tabs li a').click(function (g) { 
          var tab = $(this).closest('.tab'), 
            index = $(this).closest('li').index();
          tab.find('ul.tabs > li').removeClass('current');
          tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
          tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
        } );


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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