This accordion expands inline using height and opacity transitions, preserving layout stability in compact UI previews.
HTML
<div class="accordion-inline">
<button class="accordion-inline__header">Details</button>
<div class="accordion-inline__content">
<p>Expanded content</p>
</div>
</div>CSS
.accordion-inline {
width: 200px;
}
.accordion-inline__header {
width: 100%;
padding: 0.6rem;
border-radius: 12px;
border: none;
background: #6366f1;
color: #ffffff;
font-size: 12px;
cursor: pointer;
}
.accordion-inline__content {
margin-top: 0.25rem;
padding: 0.6rem;
border-radius: 12px;
background: #F1F6F9;
color: #111827;
font-size: 12px;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 220ms ease, opacity 180ms ease;
}
.accordion-inline:hover .accordion-inline__content {
max-height: 80px;
opacity: 1;
}
@media (prefers-color-scheme: dark) {
.accordion-inline__content {
background: #020617;
color: #e5e7eb;
}
}Notes
- Inline expansion without layout jump
- Hover-based preview interaction
- Suitable for compact settings panels
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.