kupshop/web/templates/x/static/js/docs/tabs.md

HTML:

<div data-tabs="product-description">
   <ul class="tabs-nav" data-tabs="nav">
      {if $hasDescr}
         <li class="active">
            {$hasActiveTab = true}
            <a href="#popis">Popis produktu</a>
         </li>
      {/if}

      {if $body.product.attachments}
         <li {if !$hasActiveTab}class="active"{/if}>
            {$hasActiveTab = true}
            <a href="#prilohy">Ke stažení</a>
         </li>
      {/if}
   </ul>

   <div class="tabs-content" data-tabs="content">
      {if $hasDescr}
         <div class="product-description tab-pane active" id="popis">
            {$hasActivePane = true}
            {$body.product.longDescr nofilter}
            {$body.product.parameters nofilter}
         </div>
      {/if}

      {if $body.product.attachments}
         <div class="tab-pane {if !$hasActivePane}active{/if}" id="prilohy">
            {$hasActivePane = true}
            {include "product/product.attachments.tpl"}
         </div>
      {/if}
   </div>
</div>

JS:

const WpjTabs = require('@assets/js/wpj.tabs.js');
const tabs = new WpjTabs('[data-tabs="product-description"]');

CSS:

@import "@css[shared]/components/tabs/_tabs-nav";
@import "@css[shared]/components/tabs/_tabs-content";