This accordion uses focus and outline transitions to emphasize expanded state, optimized for keyboard and accessibility-first interfaces.
HTML
<div class="accordion-focus">
<button class="accordion-focus__header">More Info</button>
<div class="accordion-focus__content">
<p>Accessible content</p>
</div>
</div>CSS
.accordion-focus {
width: 200px;
}
.accordion-focus__header {
width: 100%;
padding: 0.6rem;
border-radius: 12px;
border: none;
background: #f3f4f6;
color: #111827;
font-size: 12px;
cursor: pointer;
}
.accordion-focus__header:focus {
outline: 2px solid #6366f1;
}
.accordion-focus__content {
margin-top: 0.25rem;
padding: 0.6rem;
border-radius: 12px;
background: #F1F6F9;
color: #111827;
font-size: 12px;
display: none;
}
.accordion-focus__header:focus + .accordion-focus__content {
display: block;
}
@media (prefers-color-scheme: dark) {
.accordion-focus__header {
background: #1e293b;
color: #e5e7eb;
}
.accordion-focus__content {
background: #020617;
color: #e5e7eb;
}
}Notes
- Keyboard-friendly interaction
- Clear focus visibility
- Minimal visual noise
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.