A flush surface accordion built with pure HTML and CSS that presents expandable content panels within a seamless, borderless layout. It maintains a clean surface aligned structure while allowing controlled content disclosure.
Usage
Use this component when interfaces require minimal visual separation between sections, such as FAQ pages, documentation areas, settings panels, or content lists that benefit from smooth expansion behavior.
Implementation
The accordion behavior is implemented using CSS state selectors and controlled height transitions, allowing panels to expand and collapse without JavaScript. The flush styling removes heavy borders and shadows to maintain surface continuity.
HTML
<div class="accordion">
<details class="accordion-item">
<summary class="accordion-trigger">Overview</summary>
<div class="accordion-panel">
<p>
Flush surface accordion with smooth motion and
zero layout shift.
</p>
</div>CSS
.accordion {
width: 200px;
background: #ececec;
border-radius: 14px;
font-family: system-ui, -apple-system, sans-serif;
overflow: hidden;
}
.accordion summary {
list-style: none;
}
.accordion summary::-webkit-details-marker {
display: none;
}
.accordion-item {
border-bottom: 1px solid #d4d4d4;
}
.accordion-item:last-child {
border-bottom: none;
}
.accordion-trigger {
padding: 0.75rem 0.9rem;
font-size: 13px;
font-weight: 500;
color: #1f2937;
cursor: pointer;
user-select: none;
transition: background 160ms ease;
}
.accordion-trigger:hover {
background: rgba(255, 255, 255, 0.4);
}
.accordion-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 240ms ease;
}
.accordion-panel > p {
overflow: hidden;
padding: 0 0.9rem;
font-size: 12px;
color: #374151;
line-height: 1.5;
}
.accordion-item[open] .accordion-panel {
grid-template-rows: 1fr;
}
.accordion-item[open] .accordion-panel > p {
padding: 0.6rem 0.9rem 0.9rem;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Features seamless surface alignment
- Supports smooth expand and collapse transitions
- Fully responsive across breakpoints
- Suitable for FAQs and documentation sections
- Easy to customize spacing and divider styling
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.