<div class="accordion-tabs accordion-tabs--content js-accordion-tabs">
    <ul class="accordion-tabs__tabs">
        <li class="accordion-tabs__tab js-accordion-tabs-tab js-accordion-tabs-tab--active" data-tab="began">How it all began</li>
        <li class="accordion-tabs__tab js-accordion-tabs-tab" data-tab="philosophy">Philosophy</li>
        <li class="accordion-tabs__tab js-accordion-tabs-tab" data-tab="promise">The Maui Jim Promise</li>
    </ul>
    <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper js-accordion-tabs-content-wrapper--active" data-tab="began">
        <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      How it all began
      <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>Maui Jim got its start in 1980 as a small company selling sunglasses on the beach in Lahaina, Hawaii. Seeing a need in the market for technology that could combat intense glare and harmful UV while bringing the brilliant colors of the island
                to life, we engineered the revolutionary PolarizedPlus2® lens. Incorporated into seven new sunglass styles, our Classic Collection was introduced. We now offer over 125 styles of sunglasses, 100% of which are polarized and protect from
                100% of UVA and UVB rays.</p>
        </div>
    </div>
    <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="philosophy">
        <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      Philosophy
      <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>Inspired by the beauty and culture of Maui, our mission is to spread aloha through vivid color, clarity, and detail.</p>
            <p>For those who appreciate the sun, Maui Jim provides more vibrant colors of the world while protecting your eyes from the harsh effects of glare and harmful rays.</p>
            <p>We make your life brighter so you see the colors of your world at their best and always feel confident in your style.</p>
            <p>Maui Jim believes color and light are the key to human experience. Our sunglasses show you its full spectrum, so you can see the world like you’ve never seen. We believe everyone should experience all 16,777,216 hues of beautiful color that
                surrounds us every day.</p>
        </div>
    </div>
    <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper" data-tab="promise">
        <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control">
      The Maui Jim Promise
      <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>We always show our true colors – true colors that come shining through in our superior customer service. We promise that you will always be greeted with a friendly voice and a dedicated representative. We want you to be happy. That’s why we
                stand behind every pair of sunglasses we make.</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": "began",
      "label": "How it all began",
      "active": true,
      "content": [
        "Maui Jim got its start in 1980 as a small company selling sunglasses on the beach in Lahaina, Hawaii. Seeing a need in the market for technology that could combat intense glare and harmful UV while bringing the brilliant colors of the island to life, we engineered the revolutionary PolarizedPlus2® lens. Incorporated into seven new sunglass styles, our Classic Collection was introduced. We now offer over 125 styles of sunglasses, 100% of which are polarized and protect from 100% of UVA and UVB rays."
      ]
    },
    {
      "id": "philosophy",
      "label": "Philosophy",
      "content": [
        "Inspired by the beauty and culture of Maui, our mission is to spread aloha through vivid color, clarity, and detail.",
        "For those who appreciate the sun, Maui Jim provides more vibrant colors of the world while protecting your eyes from the harsh effects of glare and harmful rays.",
        "We make your life brighter so you see the colors of your world at their best and always feel confident in your style.",
        "Maui Jim believes color and light are the key to human experience. Our sunglasses show you its full spectrum, so you can see the world like you’ve never seen. We believe everyone should experience all 16,777,216 hues of beautiful color that surrounds us every day."
      ]
    },
    {
      "id": "promise",
      "label": "The Maui Jim Promise",
      "content": [
        "We always show our true colors – true colors that come shining through in our superior customer service. We promise that you will always be greeted with a friendly voice and a dedicated representative. We want you to be happy. That’s why we stand behind every pair of sunglasses we make."
      ]
    }
  ]
}
  • 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