<div class="tabs js-tabs tabs--default">
    <ul class="tabs__tabs">
        <li class="tabs__tab js-tabs-tab js-tabs-tab--active" data-tab="lorem">Lorem</li>
        <li class="tabs__tab js-tabs-tab" data-tab="ipsum">Ipsum</li>
    </ul>
    <div class="tabs__content-wrapper js-tabs-content-wrapper js-tabs-content-wrapper--active" data-tab="lorem">
        <p>Consectetur adipiscing elit. Aliquam vitae tellus convallis, aliquet elit id, accumsan mauris.</p>
    </div>
    <div class="tabs__content-wrapper js-tabs-content-wrapper" data-tab="ipsum">
        <p>Mauris ac lacinia nulla. Duis eleifend pulvinar lectus, quis malesuada mi sodales id. Morbi egestas enim vel nibh ullamcorper, eu volutpat ex dignissim.</p>
    </div>
</div>
<div class="tabs js-tabs tabs--{{_self.name}}">
  <ul class="tabs__tabs">
    {{#each items}}
    <li class="tabs__tab js-tabs-tab{{#if active}} js-tabs-tab--active{{/if}}" data-tab="{{id}}">{{label}}</li>
    {{/each}}
  </ul>
  {{#each items}}
  <div class="tabs__content-wrapper js-tabs-content-wrapper{{#if active}} js-tabs-content-wrapper--active{{/if}}" data-tab="{{id}}">
    {{{content}}}
    {{#each components}}
    {{render (dynamicComponent component) context merge=true}}
    {{/each}}
  </div>
  {{/each}}
</div>
{
  "items": [
    {
      "id": "lorem",
      "label": "Lorem",
      "active": true,
      "content": "<p>Consectetur adipiscing elit. Aliquam vitae tellus convallis, aliquet elit id, accumsan mauris.</p>"
    },
    {
      "id": "ipsum",
      "label": "Ipsum",
      "content": "<p>Mauris ac lacinia nulla. Duis eleifend pulvinar lectus, quis malesuada mi sodales id. Morbi egestas enim vel nibh ullamcorper, eu volutpat ex dignissim.</p>"
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const activeTabClass = 'js-tabs-tab--active';
      const activeWrapperClass = 'js-tabs-content-wrapper--active';
    
      function initInstance(instance) {
        const tabs = instance.querySelectorAll('.js-tabs-tab');
    
        for (let i = 0; i < tabs.length; i++) {
          tabs[i].addEventListener('click', handleTab);
        }
      }
    
      function handleTab(e) {
        const tab = e.target;
        const instance = tab.closest('.js-tabs');
        const tabs = instance.querySelectorAll('.js-tabs-tab');
        const contentWrappers = instance.querySelectorAll('.js-tabs-content-wrapper');
    
        for (let i = 0; i < tabs.length; i++) {
          if (tabs[i] == tab) {
            tabs[i].classList.add(activeTabClass);
          }
          else {
            tabs[i].classList.remove(activeTabClass);
          }
        }
    
        for (let i = 0; i < contentWrappers.length; i++) {
          if (contentWrappers[i].getAttribute('data-tab') == tab.getAttribute('data-tab')) {
            contentWrappers[i].classList.add(activeWrapperClass);
          }
          else {
            contentWrappers[i].classList.remove(activeWrapperClass);
          }
        }
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-tabs');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            initInstance(instances[i]);
    
            instances[i].classList.add('js-component-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/tabs/tabs.js
  • Filesystem Path: src/components/01-elements/tabs/tabs.js
  • Size: 1.6 KB
  • Content:
    .tabs {
      color: $color-darkest;
    }
    
    .tabs__tabs {
      @include reset-list;
      display: table;
      width: 100%;
      font-size: 1.4rem;
      line-height: 3.0rem;
      table-layout: fixed;
    
      .tabs--customize-rimless & {
        font-size: 1.6rem;
        line-height: 4.0rem;
    
        @include breakpoint($breakpoint-lg) {
          line-height: 5.0rem;
        }
      }
    }
    
    .tabs__tab {
      display: table-cell;
      border-bottom: 1px solid $color-light;
      color: $color-medium-dark;
      text-align: center;
      cursor: pointer;
    
      &:hover {
        border-bottom: 1px solid $color-dark;
        color: $color-darkest;
      }
    
      &.js-tabs-tab--active {
        border-bottom: 1px solid $color-primary;
        color: $color-darkest;
        font-weight: $font-weight-bold;
      }
    
      .tabs--customize-rimless & {
        background-color: $color-lighter;
      }
    }
    
    .tabs__content-wrapper {
      display: none;
    }
    
    .js-tabs-content-wrapper--active {
      display: block;
    }
    
    .js-tabs-feature-tab {
      display: none;
    }
    
  • URL: /components/raw/tabs/tabs.scss
  • Filesystem Path: src/components/01-elements/tabs/tabs.scss
  • Size: 928 Bytes

There are no notes for this item.