details.summary.tedate

details & summaryによるアコーディオン型コンテンツが生成できます。

アコーディオンの数を定義

Question No.{{n}}

Answer No.{{n}}

  <details class="details-item">
    <summary class="summary-item">
      <p class="summary-title-wrapper">
        <span class="summary-title">{{$data['question'+n]}}</span>
        <i class="summary-icon-wrapper"><img class="summary-icon" src="../assets/images/chevron-down.svg" /></i>
      </p>
    </summary>
    <p class="answer-text">{{$data['answer'+n]}}</p>
  </details>

</div>

htmlをコピーできます。
imgタグのパスは、ペースト後、お使いの環境のものに置き換えてください。
（開閉アイコンはfont-awesomeを使用しています。取得して設置すると表示可能です。）

アコーディオン型コンテンツの
cssをコピーできます。

.details-wrapper {
  margin: 0 3rem 0 0;
  max-height: 870px;
}
.summary-icon-wrapper {
  display: block;
  min-height: 16px;
  min-width: 16px;
}
.summary-icon {
  display: block;
  height: 16px;
  width: 16px;
}
.summary-item {
  cursor: pointer;
  list-style: none;
}
.summary-title-wrapper {
  align-items: center;
  border-bottom: 1px solid #bababa;
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  font-weight: 500;
  justify-content: space-between;
  list-style: none;
  padding: 0.5rem;
  position: relative;
  transition: opacity 0.3s;
}
.summary-title-wrapper:hover {
  opacity: 0.6;
}
.summary-title {
  margin: 0 1rem 0 0;
}
details > summary:focus {
  outline: none;
}
details > summary::marker,
details > summary::-webkit-details-marker {
  display: none;
}
.details-item {
  width: 540px;
}
.details-item:last-of-type .answer-text {
  margin: 0;
}
.details-item .answer-text {
  transition: opacity 0.8s;
}
.details-item[open] .answer-text {
  animation: answerApear 0.8s ease;
}
.details-item .summary-title-wrapper .summary-icon {
  transition: transform 0.3s;
  transform: rotate(0deg);
}
.details-item[open] .summary-title-wrapper .summary-icon {
  transform: rotate(180deg);
}
.answer-text {
  border-bottom: 1px solid #bababa;
  font-size: 0.875rem;
  margin: 0 0 1rem;
  padding: 1rem;
}
@keyframes answerApear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [

    {
    "@type": "Question",
    "name": "{{$data['question'+n]}}",
    "acceptedAnswer": {
        "@type": "Answer",
        "text": "{{$data['answer'+n]}}"
      }
    },

]
}

</script>

コピーする mdi-clipboard-multiple-outline