コンポーネント集

よくある質問06 

<div class="faq-06">
    <ul class="faq-06__tab">
        <li class="faq-06__tab-item" data-target-index="0">○○について</li>
        <li class="faq-06__tab-item" data-target-index="1">××について</li>
        <li class="faq-06__tab-item" data-target-index="2">□□について</li>
        <li class="faq-06__tab-item" data-target-index="3">△△について</li>
    </ul>
    <div class="faq-06__contents">
        <div class="faq-06__content">
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
        </div>
        <div class="faq-06__content">
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
        </div>
        <div class="faq-06__content">
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
        </div>
        <div class="faq-06__content">
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
            <div class="faq-06__content-item">
                <h3 class="faq-06__content-question">質問が入ります。</h3>
                <p class="faq-06__content-answer">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
        </div>
    </div>
</div>
 
.faq-06
  ul.faq-06__tab
    each faq, index in faqItems
      li.faq-06__tab-item(data-target-index=index) #{ faq.categoryLabel }
  .faq-06__contents
    each faq in faqItems
      .faq-06__content
        each content in faq.contents
          .faq-06__content-item
            h3.faq-06__content-question #{ content.question }
            p.faq-06__content-answer #{ content.answer }
 
{
  "faqItems": [
    {
      "categoryLabel": "○○について",
      "contents": [
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        },
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        },
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        },
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        }
      ]
    },
    {
      "categoryLabel": "××について",
      "contents": [
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        },
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        },
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        }
      ]
    },
    {
      "categoryLabel": "□□について",
      "contents": [
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        },
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        },
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        },
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        }
      ]
    },
    {
      "categoryLabel": "△△について",
      "contents": [
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        },
        {
          "question": "質問が入ります。",
          "answer": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
        }
      ]
    }
  ]
}
  • Content: 
    $BLOCK_NAME: '.faq-06';

// 変数
$color_primary: #4cb6e0;
$color_secondary: #c9d0d2;
$color_white: #fff;
$duration_default: 0.4s;

#{ $BLOCK_NAME } {
  font-family: 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro W3',
    'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック',
    'MS PGothic', Sans-Serif;
  &__tab {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  &__tab-item {
    width: 47%;
    padding-bottom: 2px;
    margin-bottom: 15px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all $duration_default ease;
    @include Mq(md) {
      width: 24%;
      padding-bottom: 5px;
      font-size: 16px;
    }
    &:hover {
      color: $color_primary;
    }
    &.is-active {
      color: $color_primary;
      pointer-events: none;
      border-color: $color_primary;
    }
  }
  &__content {
    display: none;
    &.is-active {
      display: block;
    }
  }
  &__content-item {
    padding: 32px;
    margin-bottom: 2px;
    // background: $color_white;
    background: #f1f1f1; // セクションに背景色がある場合は消す
  }
  &__content-question {
    position: relative;
    padding-left: 32px;
    margin-bottom: 20px;
    font-weight: bold;
    &::before {
      position: absolute;
      top: -6px;
      left: 0;
      font-family: 'Montserrat', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: $color_primary;
      content: 'Q';
    }
  }
  &__content-answer {
    position: relative;
    padding-left: 32px;
    font-size: 13px;
    &::before {
      position: absolute;
      top: -6px;
      left: 2px;
      font-family: 'Montserrat', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: $color_secondary;
      content: 'A';
    }
  }
}
  • URL: /components/raw/faq06/faq06.scss
  • Filesystem Path: src/components/faqs/faq06/faq06.scss
  • Size: 2 KB
  • Content: 
    export function faq06() {
  const tabEls = document.getElementsByClassName('faq-06__tab-item');
  const contentEls = document.getElementsByClassName('faq-06__content');
  const faq = new Faq06(tabEls, contentEls);
  faq.init();
}

class Faq06 {
  tabEls: HTMLCollection;
  contentEls: HTMLCollection;
  constructor(tabEls: HTMLCollection, contentEls: HTMLCollection) {
    this.tabEls = tabEls;
    this.contentEls = contentEls;
  }
  /**
   * 初期化
   */
  init() {
    if (!this.tabEls.length) return;
    this.changeHandler();
    /* @ts-ignore */
    this.tabEls[0].click();
  }
  /**
   * タブ表示を変更する
   * @param tabEl アクティブ表示するタブ要素
   */
  changeTab(tabEl: HTMLElement) {
    [...this.tabEls].forEach(el => {
      el.classList.remove('is-active');
    });
    tabEl.classList.add('is-active');
  }
  /**
   * 表示コンテンツを変更する
   * @param index コンテンツ番号
   */
  changeContent(index: number) {
    // 表示コンテンツを変更
    [...this.contentEls].forEach(el => {
      el.classList.remove('is-active');
    });
    this.contentEls[index].classList.add('is-active');
  }
  /**
   * コンテンツ変更イベントの設定
   */
  changeHandler() {
    [...this.tabEls].forEach(el => {
      el.addEventListener('click', e => {
        const target = <HTMLElement>e.target;
        const targetIndex = target.dataset.targetIndex;
        this.changeTab(target);
        this.changeContent(Number(targetIndex));
      });
    });
  }
}
  • URL: /components/raw/faq06/faq06.ts
  • Filesystem Path: src/components/faqs/faq06/faq06.ts
  • Size: 1.6 KB