<div class="accordion-tabs accordion-tabs--stats js-accordion-tabs">
    <ul class="accordion-tabs__tabs">
        <li class="accordion-tabs__tab js-accordion-tabs-tab js-accordion-tabs-tab--active" data-tab="lorem">Lorem</li>
        <li class="accordion-tabs__tab js-accordion-tabs-tab" data-tab="ipsum">Ipsum</li>
        <li class="accordion-tabs__tab js-accordion-tabs-tab" data-tab="dolor-sit-amet">Dolor Sit Amet</li>
    </ul>
    <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper js-accordion-tabs-content-wrapper--active" data-tab="lorem">
        <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Lorem
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
        <div class="accordion-tabs__content">
            <p>Consectetur adipiscing elit. Aliquam vitae tellus convallis, aliquet elit id, accumsan mauris.</p>
            <p>Cras at arcu ut felis lacinia euismod eget sed odio.</p>
            <p>Sed consequat tellus vitae elit fringilla, nec pharetra nisl pellentesque.</p>
            <p>
                <a class="accordion-tabs__content-call-to-action" href="#">
          Cras Dictum
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </p>
        </div>
    </div>
    <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="ipsum">
        <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Ipsum
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
        <div class="accordion-tabs__content">
            <p>Suspendisse accumsan odio quis libero euismod maximus.</p>
        </div>
    </div>
    <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="dolor-sit-amet">
        <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Dolor Sit Amet
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

    </button>
        <div class="accordion-tabs__content">
            <p>Morbi vel velit vel leo porta gravida ac pretium mauris.</p>
            <p>In mollis tristique mattis.</p>
            <p>
                <a class="accordion-tabs__content-call-to-action" href="#">
          Ullamcorper
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </a>
            </p>
        </div>
    </div>
</div>
<div class="accordion-tabs accordion-tabs--{{_self.name}} js-accordion-tabs">
  <ul class="accordion-tabs__tabs">
    {{#each items}}
    <li class="accordion-tabs__tab js-accordion-tabs-tab{{#if active}} js-accordion-tabs-tab--active{{/if}}" data-tab="{{id}}">{{label}}</li>
    {{/each}}
  </ul>
  {{#each items}}
  <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper{{#if active}} js-accordion-tabs-content-wrapper--active{{/if}}" data-tab="{{id}}">
    <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      {{label}}
      {{render '@icons--arrow-down'}}
      {{render '@icons--arrow-up'}}
    </button>
    <div class="accordion-tabs__content">
      {{#each content}}
      <p>{{{this}}}</p>
      {{/each}}
      {{#if callToAction}}
      <p>
        <a class="accordion-tabs__content-call-to-action" href="{{callToAction.path}}">
          {{callToAction.value}}
          {{render '@icons--arrow-right'}}
        </a>
      </p>
      {{/if}}
    </div>
  </div>
  {{/each}}
</div>
{
  "items": [
    {
      "id": "lorem",
      "label": "Lorem",
      "active": true,
      "content": [
        "Consectetur adipiscing elit. Aliquam vitae tellus convallis, aliquet elit id, accumsan mauris.",
        "Cras at arcu ut felis lacinia euismod eget sed odio.",
        "Sed consequat tellus vitae elit fringilla, nec pharetra nisl pellentesque."
      ],
      "callToAction": {
        "path": "#",
        "value": "Cras Dictum"
      }
    },
    {
      "id": "ipsum",
      "label": "Ipsum",
      "content": [
        "Suspendisse accumsan odio quis libero euismod maximus."
      ]
    },
    {
      "id": "dolor-sit-amet",
      "label": "Dolor Sit Amet",
      "content": [
        "Morbi vel velit vel leo porta gravida ac pretium mauris.",
        "In mollis tristique mattis."
      ],
      "callToAction": {
        "path": "#",
        "value": "Ullamcorper"
      }
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const activeTabClass = 'js-accordion-tabs-tab--active';
      const activeWrapperClass = 'js-accordion-tabs-content-wrapper--active';
      const neverActiveTabClass = 'js-accordion-tabs-feature-tab';
    
      function initInstance(instance) {
        const tabs = instance.querySelectorAll('.js-accordion-tabs-tab');
        const accordionControls = instance.querySelectorAll('.js-accordion-tabs-accordion-control');
        const featureTabContent = instance.querySelector('.js-accordion-tabs-content-wrapper:first-child');
    
        for (let i = 0; i < tabs.length; i++) {
          if (featureTabContent && i === 0) {
            tabs[i].classList.add(neverActiveTabClass);
          }
          else {
            tabs[i].addEventListener('click', handleTab);
          }
        }
    
        for (let i = 0; i < accordionControls.length; i++) {
          accordionControls[i].addEventListener('click', handleAccordionControl);
        }
      }
    
      function handleTab(e) {
        const tab = e.target.closest('.js-accordion-tabs-tab');
        const instance = tab.closest('.js-accordion-tabs');
        const tabs = instance.querySelectorAll('.js-accordion-tabs-tab');
        const contentWrappers = instance.querySelectorAll('.js-accordion-tabs-content-wrapper:not(:first-child)');
    
        for (let i = 0; i < tabs.length; i++) {
          if (!tabs[i].classList.contains(neverActiveTabClass)) {
            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 handleAccordionControl(e) {
        const control = e.target;
        const instance = control.closest('.js-accordion-tabs');
        const tabs = instance.querySelectorAll('.js-accordion-tabs-tab');
        const contentWrappers = instance.querySelectorAll('.js-accordion-tabs-content-wrapper');
    
        for (let i = 0; i < tabs.length; i++) {
          if (tabs[i].getAttribute('data-tab') == control.parentNode.getAttribute('data-tab')) {
            tabs[i].classList.add(activeTabClass);
          }
          else {
            tabs[i].classList.remove(activeTabClass);
          }
        }
    
        for (let i = 0; i < contentWrappers.length; i++) {
          if (contentWrappers[i].querySelector('.js-accordion-tabs-accordion-control') == control) {
            contentWrappers[i].classList.add(activeWrapperClass);
          }
          else {
            contentWrappers[i].classList.remove(activeWrapperClass);
          }
        }
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-accordion-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/accordion-tabs/accordion-tabs.js
  • Filesystem Path: src/components/01-elements/accordion-tabs/accordion-tabs.js
  • Size: 3.2 KB
  • Content:
    .accordion-tabs {
      color: $color-darkest;
    
      // Adds a gutter for text in PDP when there are no accordion tabs present
      & > .accordion-tabs__content-item {
        @include breakpoint($breakpoint-sm-only) {
          padding: 0 $gutter-width-half;
        }
      }
    }
    
    .accordion-tabs--stats {
      @include breakpoint($breakpoint-md) {
        min-height: 200px;
      }
    
      @include breakpoint($breakpoint-xl) {
        min-height: 230px;
      }
    }
    
    .accordion-tabs__tabs {
      @include reset-list;
      display: table;
      width: 100%;
      margin-bottom: 5px;
      font-size: 1.4rem;
      line-height: 3.0rem;
      table-layout: fixed;
    
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    }
    
    .accordion-tabs__tab {
      display: table-cell;
      border-bottom: 1px solid $color-light;
      text-align: center;
      cursor: pointer;
    
      &:hover {
        border-bottom: 1px solid $color-dark;
      }
    
      &.js-accordion-tabs-tab--active {
        border-bottom: 1px solid $color-primary;
        font-weight: $font-weight-bold;
      }
    }
    
    .accordion-tabs__accordion-control {
      @include reset-button;
      display: block;
      position: relative;
      width: 100%;
      padding-left: 20px;
      background-color: $color-lighter;
      color: $color-darkest;
      font-size: 1.9rem;
      letter-spacing: 2px;
      line-height: 5.0rem;
      text-align: left;
      box-sizing: border-box;
    
      &:after {
        position: absolute;
        right: 20px;
        bottom: 0;
        left: 20px;
        border-bottom: 1px solid $color-light;
        content: '';
      }
    
      .icon {
        position: absolute;
        right: 20px;
        fill: $color-dark;
        pointer-events: none;
      }
    
      .icon--arrow-down {
        top: 22px;
      }
    
      // Remove .icon--close-large once removed from accordion-tabs markup.
      .icon--close-large,
      .icon--arrow-up {
        display: none;
        top: 20px;
        width: 10px;
        height: 10px;
      }
    
      .js-accordion-tabs-content-wrapper--active & {
        .icon--arrow-down {
          display: none;
        }
    
        // Remove .icon--close-large once removed from accordion-tabs markup.
        .icon--close-large,
        .icon--arrow-up {
          display: block;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .accordion-tabs__content-wrapper {
      @include breakpoint($breakpoint-md) {
        &:first-child {
          .accordion-tabs__content {
            display: block;
          }
        }
      }
    }
    
    .js-accordion-tabs-feature-tab {
      display: none;
    }
    
    .accordion-tabs__content {
      display: none;
      margin: 0;
      padding: 5px 20px;
      box-sizing: border-box;
    
      .js-accordion-tabs-content-wrapper--active & {
        display: block;
      }
    
      .accordion-tabs--stats & > p {
        margin: 10px 0;
        color: $color-darkest;
        font-size: 1.4rem;
        letter-spacing: 1px;
        line-height: 2.0rem;
      }
    
      .accordion-tabs--content & {
        & > p {
          margin: 10px 0;
          color: $color-dark;
          font-size: 1.4rem;
          letter-spacing: normal;
          line-height: 1.7rem;
        }
    
        a {
          transition: color $transition-standard;
          color: $color-dark;
          font-weight: $font-weight-bold;
          text-decoration: none;
    
          &:hover {
            color: $color-primary;
          }
        }
      }
    
      ul:not([class]) {
        padding: 0;
        color: $color-dark;
        font-size: 1.4rem;
        line-height: 1.7rem;
      }
    
      li:not([class]) {
        margin: 0;
        padding: 0;
    
        &:before {
          content: none !important;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        padding: 5px 0;
    
        ul:not([class]) {
          columns: 2;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .accordion-tabs--content & > p {
          margin: 20px 0;
          font-size: 1.9rem;
          line-height: 2.3rem;
        }
    
        ul:not([class]) {
          max-width: 700px;
          margin: 0 auto;
          font-size: 1.9rem;
          line-height: 2.3rem;
        }
    
        li:not([class]) {
          margin: 0 0 15px;
        }
      }
    }
    
    .accordion-tabs__content-item {
      margin: 5px 0;
    }
    
    .accordion-tabs__content-item--image {
      width: 50%;
      float: left;
      text-align: center;
    
      .accordion-tabs__content-image {
        margin: 0 auto;
      }
    }
    
    .accordion-tabs__content-call-to-action {
      display: block;
      color: $color-darkest;
      text-decoration: none;
    
      .icon {
        position: relative;
        top: -1px;
        height: 8px;
        padding-left: 5px;
      }
    
      &:hover .icon {
        transition: fill $transition-standard;
        fill: $color-primary;
      }
    
      @include breakpoint($breakpoint-md) {
        display: inline;
      }
    }
    
    .js-accordion-tabs-content-wrapper--active[data-tab='included'] {
      .accordion-tabs__content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
    }
    
  • URL: /components/raw/accordion-tabs/accordion-tabs.scss
  • Filesystem Path: src/components/01-elements/accordion-tabs/accordion-tabs.scss
  • Size: 4.5 KB

Any updates to the markup of this component should also be reflected in the following components:

  • product-description