Accordion (FAQ) Pure CSS

<div class="accordion-container">
  <details class="accordion" name="faq">
    <summary class="accordion-summary">
      Đặc điểm của accordion này là gì?
      <span class="icon"></span>
    </summary>
    <div class="accordion-content">
      <p>Nó được xây dựng chỉ bằng CSS và các tính năng tiêu chuẩn của HTML, không sử dụng JavaScript. Rất nhẹ và tối ưu cho SEO cũng như trợ năng (chẳng hạn như hỗ trợ thao tác bằng bàn phím).</p>
    </div>
  </details>
  
  <details class="accordion" name="faq">
    <summary class="accordion-summary">
      Có thể mở nhiều mục cùng lúc không?
      <span class="icon"></span>
    </summary>
    <div class="accordion-content">
      <p>Bằng cách thiết lập cùng một giá trị cho thuộc tính name, bạn có thể kiểm soát loại trừ (mở một mục thì mục kia sẽ đóng).</p>
    </div>
  </details>
</div>

/* Styling cho container */
.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* Phần thân accordion */
.accordion {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Styling cho phần summary (tiêu đề) */
.accordion-summary {
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none; /* Ẩn dấu tam giác mặc định */
  color: #1e293b;
  transition: background-color 0.2s ease;
  user-select: none;
}

/* Ẩn dấu tam giác mặc định cho trình duyệt Safari */
.accordion-summary::-webkit-details-marker {
  display: none;
}

.accordion-summary:hover {
  background-color: #f8fafc;
}

/* Đường gạch dưới của summary khi ở trạng thái mở */
.accordion[open] .accordion-summary {
  border-bottom: 1px solid #e2e8f0;
}

/* Styling cho icon đóng mở */
.icon {
  position: relative;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 1rem;
}

/* Đường ngang và đường dọc của icon */
.icon::before,
.icon::after {
  content: '';
  position: absolute;
  background-color: #64748b;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}

.icon::before {
  width: 16px;
  height: 2px;
}

.icon::after {
  width: 2px;
  height: 16px;
}

/* Animation khi accordion mở (dấu + chuyển thành dấu -) */
.accordion[open] .icon::after {
  transform: rotate(90deg) scaleY(0);
}

.accordion[open] .icon::before {
  background-color: #3b82f6;
}

/* Styling cho phần nội dung */
.accordion-content {
  padding: 1.5rem;
  color: #475569;
  line-height: 1.6;
  animation: fadeDown 0.3s ease-out forwards;
}

.accordion-content p {
  margin: 0;
}

/* Animation xuất hiện một cách mềm mại */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}