Smooth Reveal Accordion

Trải nghiệm thực tế (Preview)

このアコーディオンの特徴は？

洗練されたデザインと、スムーズに展開するアニメーションが特徴のコンポーネントです。モダンなCSS技術を使用し、固定の高さやJavaScriptによる複雑な計算に頼ることなく、コンテンツの自然な高さに合わせてシームレスに開閉します。

アニメーションの仕組みは？

CSS Gridを利用しています。grid-template-rowsの値を0frから1frへとトランジションさせることで、モダンブラウザ全体で滑らかで信頼性の高い高さのアニメーションを実現しています。

アクセシビリティ対応は？

はい、対応しています。ボタンには適切なaria-expanded属性が使用されており、スクリーンリーダーなどの支援技術を使用するユーザーにも、各アコーディオンパネルの開閉状態が正しく伝わります。

Ứng dụng & Tính năng nổi bật

Chuyên mục FAQ (Hỏi đáp): Sự lựa chọn số một để ẩn/hiện danh sách các câu hỏi thường gặp mà không làm rối thiết kế.
Cấu trúc Menu Cài đặt: Chia nhỏ các thiết lập hệ thống phức tạp theo từng nhóm, giúp người dùng tập trung vào nội dung họ quan tâm.
Mobile Navigation: Cực kỳ hữu dụng khi cần xây dựng hệ thống menu đa cấp độ trong không gian màn hình chật hẹp của thiết bị di động.
Hiệu suất Animation vượt trội: Thay vì dùng Javascript để tính toán height, component ứng dụng kỹ thuật CSS Grid để thực thi quá trình mở/đóng cực kỳ êm ái, hoạt động độc lập với lượng chữ. Tính năng “Đóng/Mở độc quyền” cũng được kích hoạt mặc định.

Điểm nhấn Thiết kế & UX

Hoạt ảnh Grid Transitions: Cú bắt tay giữa grid-template-rows và thuật toán gia tốc cubic-bezier giúp hoạt động đóng/mở vừa uyển chuyển vừa dứt khoát.
Chỉ báo trực quan cực nhạy: Màu viền (border), màu font chữ và icon (biểu tượng SVG) sẽ biến đổi ngay tắp lự theo trạng thái đóng/mở, không để người dùng phải hoang mang.
Phản hồi tương tác Hover: Shadow đổ nhẹ cùng màu viền sáng lên báo hiệu rõ ràng tính năng này đang đợi người dùng click.
Tuân thủ chuẩn Accessibility: Thuộc tính aria-expanded được script cập nhật linh hoạt, cung cấp đầy đủ tín hiệu cho các phần mềm Screen Reader.

Hướng dẫn tùy chỉnh

Chế độ Mở đa luồng (Multi-Open): Bạn có thể cho phép người dùng bung nhiều Accordion cùng lúc bằng cách comment (hoặc xóa) phần mã tự động đóng các thẻ khác trong khối Javascript.
Bộ màu Theme: Chỉ cần Search & Replace mã màu #8b5cf6 bằng Primary Color của dự án, mọi thứ sẽ đâu vào đấy.
Thay Icon tùy ý: Nút mũi tên đang hiển thị có thể thay thế dễ dàng bởi bất cứ icon SVG nào khác (Icon Dấu cộng/trừ, Caret) từ các thư viện như Lucide, Heroicons…

Mã nguồn triển khai

<div class="accordion-container">
<div class="accordion-item">
  <button class="accordion-header" aria-expanded="false">
    <span class="accordion-title">このアコーディオンの特徴は？</span>
    <span class="accordion-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
    </span>
  </button>
  <div class="accordion-content-wrapper">
    <div class="accordion-content">
      洗練されたデザインと、スムーズに展開するアニメーションが特徴のコンポーネントです。モダンなCSS技術を使用し、固定の高さやJavaScriptによる複雑な計算に頼ることなく、コンテンツの自然な高さに合わせてシームレスに開閉します。
    </div>
  </div>
</div>
<!-- 他のアコーディオンアイテムをここに追加 -->
</div>

<style>
.accordion-container {
max-width: 600px;
width: 100%;
display: flex;
flex-direction: column;
gap: 0.75rem;
font-family: system-ui, -apple-system, sans-serif;
}

.accordion-item {
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item:hover {
border-color: #d1d5db;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.accordion-item.active {
border-color: #8b5cf6;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.accordion-header {
width: 100%;
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
background: none;
border: none;
cursor: pointer;
text-align: left;
color: #1f2937;
}

.accordion-title {
font-weight: 600;
font-size: 1.05rem;
transition: color 0.3s ease;
}

.accordion-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: #6b7280;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}

.accordion-item.active .accordion-icon {
transform: rotate(180deg);
color: #8b5cf6;
}

.accordion-item.active .accordion-title {
color: #8b5cf6;
}

.accordion-content-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item.active .accordion-content-wrapper {
grid-template-rows: 1fr;
}

.accordion-content {
overflow: hidden;
padding: 0 1.5rem;
color: #4b5563;
line-height: 1.6;
font-size: 0.95rem;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.4s ease, transform 0.4s ease, padding 0.4s ease;
}

.accordion-item.active .accordion-content {
padding-bottom: 1.25rem;
opacity: 1;
transform: translateY(0);
}
</style>

<script>
document.querySelectorAll('.accordion-header').forEach(button => {
button.addEventListener('click', () => {
  const item = button.closest('.accordion-item');
  const isExpanded = button.getAttribute('aria-expanded') === 'true';
  
  document.querySelectorAll('.accordion-item').forEach(otherItem => {
    if (otherItem !== item) {
      otherItem.classList.remove('active');
      otherItem.querySelector('.accordion-header').setAttribute('aria-expanded', 'false');
    }
  });

  if (!isExpanded) {
    item.classList.add('active');
    button.setAttribute('aria-expanded', 'true');
  } else {
    item.classList.remove('active');
    button.setAttribute('aria-expanded', 'false');
  }
});
});
</script>

Khả năng tương thích trình duyệt

Chrome: Hỗ trợ
Firefox: Hỗ trợ
Safari: Hỗ trợ (Hỗ trợ đầy đủ Grid Animation từ Safari 16+)
Edge: Hỗ trợ

※ Ghi chú: Nếu hoạt động trên các trình duyệt quá cũ không hỗ trợ CSS Grid Transitions, thao tác đóng/mở sẽ bật/tắt ngay lập tức thay vì trượt mượt mà. Tuy nhiên, tính năng sử dụng cốt lõi vẫn không bị suy giảm.