コンポーネント集

よくある質問08 

<ul class="faq-08">
    <li class="faq-08__item">
        <h3 class="faq-08__question js-faq-08-question"><span class="faq-08__question-icon">Q</span>質問1が入ります。<span class="faq-08__question-toggle"></span></h3>
        <div class="faq-08__answer-wrapper">
            <div class="faq-08__answer">
                <div class="faq-08__answer-content">
                    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
                </div>
            </div>
        </div>
    </li>
    <li class="faq-08__item">
        <h3 class="faq-08__question js-faq-08-question"><span class="faq-08__question-icon">Q</span>質問2が入ります。<span class="faq-08__question-toggle"></span></h3>
        <div class="faq-08__answer-wrapper">
            <div class="faq-08__answer">
                <div class="faq-08__answer-content">
                    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
                </div>
            </div>
        </div>
    </li>
    <li class="faq-08__item">
        <h3 class="faq-08__question js-faq-08-question"><span class="faq-08__question-icon">Q</span>質問3が入ります。<span class="faq-08__question-toggle"></span></h3>
        <div class="faq-08__answer-wrapper">
            <div class="faq-08__answer">
                <div class="faq-08__answer-content">
                    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
                </div>
            </div>
        </div>
    </li>
</ul>
 
ul.faq-08
  each faq in faqItems
    li.faq-08__item
      h3.faq-08__question.js-faq-08-question
        span.faq-08__question-icon Q
        | #{ faq.question }
        span.faq-08__question-toggle
      .faq-08__answer-wrapper
        .faq-08__answer
          .faq-08__answer-content !{ faq.answer }
 
{
  "faqItems": [
    {
      "question": "質問1が入ります。",
      "answer": "<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>"
    },
    {
      "question": "質問2が入ります。",
      "answer": "<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>"
    },
    {
      "question": "質問3が入ります。",
      "answer": "<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>"
    }
  ]
}
  • Content: 
    $BLOCK_NAME: '.faq-08';

// 変数
$color_primary: #5c4c2c;
$color_primary_light: #cfb17a;
$color_secondary: #f5c271;
$color_bg: #fef5e6;
$color_white: #fff;
$duration_default: 0.4s;
$easing_default: cubic-bezier(0.68, -0.55, 0.265, 1.55);
$easing_color: cubic-bezier(0.165, 0.84, 0.44, 1);

#{ $BLOCK_NAME } {
  font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
  font-size: 16px;

  &__item {
    overflow: hidden;
    color: $color_primary;
    background: $color_bg;
    border-radius: 10px;
    transition: all $duration_default $easing_color;
    &.is-active {
      color: $color_white;
      background: $color_secondary;
    }
    & + & {
      margin-top: 16px;
    }
  }

  &__question {
    position: relative;
    padding: 29px 80px 29px 100px;
    cursor: pointer;

    &-icon {
      position: absolute;
      top: 16px;
      left: 32px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      font-size: 20px;
      color: $color_white;
      transition: color $duration_default $easing_color;

      &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        content: '';
        background: $color_primary_light;
        border-radius: 16px;
        transition: transform 0s,
          background-color $duration_default $easing_color;
        transform: rotate(-45deg);
        @at-root #{ $BLOCK_NAME }__question:hover & {
          transition: transform $duration_default $easing_default;
          transform: rotate(45deg);
        }
      }

      @at-root #{ $BLOCK_NAME }__item.is-active & {
        color: $color_secondary;
        &::before {
          background: $color_white;
        }
      }
    }

    &-toggle {
      position: absolute;
      top: 30px;
      right: 30px;
      display: block;
      width: 24px;
      height: 24px;
      transition: transform $duration_default $easing_default;
      @at-root #{ $BLOCK_NAME }__item.is-active & {
        transform: rotate(45deg);
      }

      &::before,
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        content: '';
        background: $color_primary_light;
        transition: background-color $duration_default $easing_color;
        @at-root #{ $BLOCK_NAME }__item.is-active & {
          background: $color_white;
        }
      }
      &::before {
        width: 2px;
      }
      &::after {
        height: 2px;
      }
    }
  }

  &__answer-wrapper {
    height: 0;
  }

  &__answer {
    padding: 16px 30px 30px;
  }

  &__answer-content {
    padding: 16px;
    color: $color_primary;
    background: $color_white;
    border-radius: 10px;
  }
}
  • URL: /components/raw/faq08/faq08.scss
  • Filesystem Path: src/components/faqs/faq08/faq08.scss
  • Size: 2.9 KB
  • Content: 
    import { gsap } from 'gsap';

export function faq08() {
  const items = document.getElementsByClassName('js-faq-08-question');
  [...items].forEach(item => {
    const faq = new Faq08(<HTMLElement>item);
    faq.init();
  });
}

class Faq08 {
  questionEl: HTMLElement;
  answerEl: HTMLElement;
  isOpen: Boolean;
  speed: number;
  constructor(questionEl: HTMLElement) {
    this.questionEl = questionEl;
    this.answerEl = <HTMLElement>this.questionEl.nextElementSibling;
    this.isOpen = false;
    this.speed = .5;
  }
  /**
   * 初期化
   */
  init() {
    this.toggleHandler();
  }
  /**
   * FAQを開閉する
   */
  toggleAnswer() {
    if (!this.isOpen) {
      // 閉じている場合
      const self = this;
      this.questionEl.parentElement.classList.add('is-active');
      gsap.to(this.answerEl, {
        duration: this.speed,
        height: 'auto',
        onComplete() {
          self.isOpen = true;
        }
      });
    } else {
      // 開いている場合
      const self = this;
      this.questionEl.parentElement.classList.remove('is-active');
      gsap.to(this.answerEl, {
        duration: this.speed,
        height: 0,
        onComplete() {
          self.isOpen = false;
        }
      });
    }
  }
  /**
   * 開閉イベントの設定
   */
  toggleHandler() {
    this.questionEl.addEventListener('click', () => {
      this.toggleAnswer.call(this);
    });
  }
}
  • URL: /components/raw/faq08/faq08.ts
  • Filesystem Path: src/components/faqs/faq08/faq08.ts
  • Size: 1.5 KB