Stylish HTML and CSS Accordion

Implement a sleek and modern accordion component using HTML details and summary tags styled with CSS. This simple solution is accessible and perfect for FAQs or collapsible content sections.

HTML CSS JavaScript Output Live Updates

body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #f4f4f4;
}
.accordion-container {
  max-width: 600px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden; /* Ensures border-radius clips children */
}
.accordion-item {
  border-bottom: 1px solid #e0e0e0;
}
.accordion-item:last-child {
  border-bottom: none;
}
.accordion-title {
  padding: 15px 20px;
  font-weight: bold;
  cursor: pointer;
  outline: none; /* Remove default focus outline */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
  color: #333;
}
.accordion-title:hover {
  background-color: #f9f9f9;
}
.accordion-title::after {
  content: '\002B'; /* Plus sign */
  font-size: 1.2em;
  transition: transform 0.3s ease;
}
.accordion-item[open] > .accordion-title {
  background-color: #e9e9e9;
}
.accordion-item[open] > .accordion-title::after {
  content: '\2212'; /* Minus sign */
  transform: rotate(180deg);
}
.accordion-content {
  padding: 15px 20px;
  background-color: #fff;
  line-height: 1.6;
  color: #555;
  border-top: 1px dashed #e0e0e0;
}
/* For smoother animation (optional) */
.accordion-item[open] .accordion-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}