<div class="faq-question js-faq-question">
    <h2 class="faq-question__question js-faq-question-question">
        How do I get my sunglasses repaired?
        <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>

    </h2>
    <div class="faq-question__answer js-faq-question-answer">
        <p>Begin your repair process by visiting <a href='#'>repairsus.mauijim.com</a>. Please complete the form by providing the information needed for your repair.</p>
    </div>
</div>
<div class="faq-question js-faq-question">
  <h2 class="faq-question__question js-faq-question-question">
    {{question}}
    {{render '@icons--arrow-down'}}
    {{render '@icons--arrow-up'}}
  </h2>
  <div class="faq-question__answer js-faq-question-answer">{{{answer}}}</div>
</div>
{
  "question": "How do I get my sunglasses repaired?",
  "answer": "<p>Begin your repair process by visiting <a href='#'>repairsus.mauijim.com</a>. Please complete the form by providing the information needed for your repair.</p>"
}
  • Content:
    (function (window) {
      'use strict';
    
      const openQuestionClass = 'js-faq-question--open';
    
      function handleQuestionToggle(e) {
        const instance = e.target.closest('.js-faq-question');
    
        if (instance) {
          instance.classList.toggle(openQuestionClass);
        }
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-faq-question');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            const question = instances[i].querySelector('.js-faq-question-question');
    
            if (question) {
              question.addEventListener('click', handleQuestionToggle);
            }
    
            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/faq-question/faq-question.js
  • Filesystem Path: src/components/01-elements/text-blocks/faq-question/faq-question.js
  • Size: 940 Bytes
  • Content:
    .faq-question {
      margin-bottom: 10px;
      border-bottom: 1px solid $color-light;
    }
    
    .faq-question__question {
      position: relative;
      margin: 20px 0;
      padding: 0 30px 0 $gutter-width-half;
      color: $color-darkest;
      font-size: 1.6rem;
      letter-spacing: 1px;
      line-height: 1.9rem;
      cursor: pointer;
    
      .icon {
        position: absolute;
        top: 50%;
        right: $gutter-width-half;
        width: 12px;
        height: 4px;
        transform: translateY(-50%);
      }
    
      .icon--arrow-up {
        display: none;
      }
    
      .js-faq-question--open & {
        .icon--arrow-down {
          display: none;
        }
    
        .icon--arrow-up {
          display: inline-block;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .faq-question__answer {
      display: none;
      margin-bottom: 30px;
      padding: 0 $gutter-width-half;
    
      h3 {
        margin: 20px 0 10px;
        color: $color-darkest;
        font-size: 1.4rem;
        font-weight: $font-weight-bold;
        letter-spacing: 1px;
        line-height: 2.0rem;
      }
    
      &,
      p,
      ul,
      li {
        color: $color-dark;
        font-size: 1.4rem;
        line-height: 1.7rem;
      }
    
      a {
        transition: color $transition-standard;
        color: $color-dark;
        font-weight: $font-weight-bold;
        text-decoration: none;
    
        &:hover {
          color: $color-primary;
        }
      }
    
      .js-faq-question--open & {
        display: block;
      }
    
      @include breakpoint($breakpoint-xl) {
        &,
        p,
        ul,
        li {
          font-size: 1.9rem;
          line-height: 2.3rem;
        }
      }
    }
    
  • URL: /components/raw/faq-question/faq-question.scss
  • Filesystem Path: src/components/01-elements/text-blocks/faq-question/faq-question.scss
  • Size: 1.5 KB

There are no notes for this item.