コンポーネント集

よくある質問07 

<ul class="faq-07">
    <li class="faq-07__item">
        <h3 class="faq-07__question js-faq-07-question"><i class="faq-07__question-icon fas fa-exclamation-triangle"></i>質問1が入ります。</h3>
        <div class="faq-07__answer-wrapper">
            <p class="faq-07__answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            <p class="faq-07__answer-link"><a href="#"><i class="faq-07__answer-link-icon fas fa-external-link-alt"></i>関連リンクが入ります</a></p>
        </div>
    </li>
    <li class="faq-07__item">
        <h3 class="faq-07__question js-faq-07-question"><i class="faq-07__question-icon fas fa-exclamation-triangle"></i>質問2が入ります。</h3>
        <div class="faq-07__answer-wrapper">
            <p class="faq-07__answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            <p class="faq-07__answer-link"><a href="#"><i class="faq-07__answer-link-icon fas fa-external-link-alt"></i>関連リンクが入ります</a></p>
        </div>
    </li>
    <li class="faq-07__item">
        <h3 class="faq-07__question js-faq-07-question"><i class="faq-07__question-icon fas fa-exclamation-triangle"></i>質問3が入ります。</h3>
        <div class="faq-07__answer-wrapper">
            <p class="faq-07__answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            <p class="faq-07__answer-link"><a href="#"><i class="faq-07__answer-link-icon fas fa-external-link-alt"></i>関連リンクが入ります</a></p>
        </div>
    </li>
</ul>
 
ul.faq-07
  each faq in faqItems
    li.faq-07__item
      h3.faq-07__question.js-faq-07-question
        i.faq-07__question-icon.fas.fa-exclamation-triangle
        | #{ faq.question }
      .faq-07__answer-wrapper
        p.faq-07__answer #{ faq.answer }
        p.faq-07__answer-link
          a(href=faq.link)
            i.faq-07__answer-link-icon.fas.fa-external-link-alt
            | #{ faq.linkText }
 
{
  "faqItems": [
    {
      "question": "質問1が入ります。",
      "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
      "link": "#",
      "linkText": "関連リンクが入ります"
    },
    {
      "question": "質問2が入ります。",
      "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
      "link": "#",
      "linkText": "関連リンクが入ります"
    },
    {
      "question": "質問3が入ります。",
      "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
      "link": "#",
      "linkText": "関連リンクが入ります"
    }
  ]
}
  • Content: 
    $BLOCK_NAME: '.faq-07';

// 変数
$color_primary: #eb4e48;
$color_secondary: #498cab;
$color_link: rgba(58, 61, 71, 0.7);
$color_bg: #f1f7f8;

#{ $BLOCK_NAME } {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;

  &__item {
    overflow: hidden;
    border: 1px solid $color_primary;
    border-radius: 12px;
    & + & {
      margin-top: 16px;
    }
  }

  &__question {
    position: relative;
    padding: 16px 48px;
    font-weight: 700;
    color: $color_primary;

    &::before {
      position: absolute;
      top: 18px;
      right: 16px;
      display: block;
      width: 12px;
      height: 12px;
      content: '';
      border-top: 2px solid $color_primary;
      border-left: 2px solid $color_primary;
      transition: transform 0.5s;
      transform: rotate(-135deg);
    }

    &-icon {
      position: absolute;
      top: 16px;
      left: 16px;
      font-size: 22px;
    }

    &.is-active {
      &::before {
        transform: rotate(45deg);
      }
    }
  }

  &__answer-wrapper {
    // padding: 16px;
    height: 0px;
    background: $color_bg;
  }

  &__answer {
    padding: 16px 16px 0;
    color: $color_secondary;
  }

  &__answer-link {
    padding: 0 16px 16px;
    margin-top: 24px;
    & > a {
      position: relative;
      display: block;
      padding-left: 24px;
      color: $color_link;
    }
    &-icon {
      position: absolute;
      top: 3px;
      left: 0;
    }
  }
}
  • URL: /components/raw/faq07/faq07.scss
  • Filesystem Path: src/components/faqs/faq07/faq07.scss
  • Size: 1.5 KB
  • Content: 
    import { gsap } from 'gsap';

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

class Faq07 {
  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.classList.add('is-active');
      gsap.to(this.answerEl, {
        duration: this.speed,
        height: 'auto',
        onComplete() {
          self.isOpen = true;
        }
      });
    } else {
      // 開いている場合
      const self = this;
      this.questionEl.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/faq07/faq07.ts
  • Filesystem Path: src/components/faqs/faq07/faq07.ts
  • Size: 1.5 KB