The problem
You need a simple, accessible accordion without JavaScript for FAQs or collapsible content.
The solution
details {
background: #1a1a2e;
border: 1px solid #2a2a4e;
border-radius: 8px;
margin-bottom: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
details[open] {
border-color: #3a7bff;
box-shadow: 0 4px 12px rgba(58, 123, 255, 0.1);
}
summary {
padding: 16px 20px;
cursor: pointer;
user-select: none;
list-style: none;
font-weight: 600;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.2s;
}
summary::-webkit-details-marker {
display: none;
}
summary:hover {
background: rgba(58, 123, 255, 0.1);
}
/* Custom icon */
summary::after {
content: '+';
font-size: 24px;
color: #3a7bff;
transition: transform 0.3s;
}
details[open] summary::after {
content: '−';
transform: rotate(180deg);
}
/* Content area */
.accordion-content {
padding: 0 20px 16px 20px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Styled variant */
.accordion-fancy summary {
background: linear-gradient(90deg, #3a7bff 0%, #8b5cf6 100%);
color: white;
}See it live
Put it to work
<details>
<summary>What is CSS?</summary>
<div class="accordion-content">
<p>CSS (Cascading Style Sheets) is a styling language used to describe the presentation of HTML documents.</p>
</div>
</details>
<details>
<summary>How do I center a div?</summary>
<div class="accordion-content">
<p>Use flexbox: display: flex; justify-content: center; align-items: center;</p>
</div>
</details>
<details open>
<summary>What are CSS variables?</summary>
<div class="accordion-content">
<p>CSS custom properties that can be reused throughout your stylesheet.</p>
</div>
</details>Worth knowing
details/summary provides native accordion functionality. No JavaScript needed. Fully accessible by default.