FAQ Accordion

Một câu hỏi thường gặp về mặt ngữ nghĩa và dễ tiếp cận bằng cách sử dụng các phần tử details và summary gốc. Nó được xây dựng chỉ bằng HTML/CSS mà không sử dụng JavaScript nên thân thiện với SEO và cực kỳ nhẹ. Chúng tôi cũng sử dụng CSS để thêm kiểu tùy chỉnh, trạng thái di chuột và hoạt ảnh xoay biểu tượng mượt mà.

<div class="faq-container">
  <details class="faq-item">
    <summary class="faq-summary">
      <span class="faq-question">FAQアコーディオンとは何ですか？</span>
      <svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="m6 9 6 6 6-6"/>
      </svg>
    </summary>
    <div class="faq-content">
      <p>FAQアコーディオンは、ユーザーがContentの表示・非表示を切り替えられるUIパターンです。よくある質問などで、ページのスペースを節約するためによく使用されます。</p>
    </div>
  </details>
  <details class="faq-item">
    <summary class="faq-summary">
      <span class="faq-question">どのような仕組みですか？</span>
      <svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="m6 9 6 6 6-6"/>
      </svg>
    </summary>
    <div class="faq-content">
      <p>ネイティブのHTML5 detailsおよびsummary要素を使用しています。summaryがクリックされると、ブラウザが自動的に関連するContentを展開または折りたたみます。</p>
    </div>
  </details>
</div>

.faq-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: system-ui, -apple-system, sans-serif;
}

.faq-item {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.faq-item:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-color: #d1d5db;
}

.faq-item[open] {
  border-color: #3b82f6;
}

.faq-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none; /* デフォルトの三角形を非表示 */
  font-weight: 600;
  color: #1f2937;
}

/* Webkit向けにデフォルトの三角形を非表示 */
.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-question {
  padding-right: 16px;
}

.faq-icon {
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.3s ease;
}

/* detailsが開いているときにアイコンを回転 */
.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  color: #3b82f6;
}

.faq-content {
  padding: 0 20px 20px;
  color: #4b5563;
  line-height: 1.6;
}

.faq-item[open] .faq-content {
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}