A collapsible info block built with pure HTML and CSS that hides detailed information behind a toggleable header, allowing users to expand or collapse content without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where secondary details should remain optional, such as FAQs, help sections, documentation notes, product specifications, policy explanations, or content summaries that benefit from compact presentation.
Implementation
The collapse behavior is implemented using CSS toggle techniques such as checkbox based states or the <details> element, enabling smooth show and hide interactions while preserving accessibility and responsive layout behavior.
HTML
<section class="block-collapsible">
<span class="block-collapsible__title">Details</span>
<p class="block-collapsible__content">Additional info</p>
</section>CSS
.block-collapsible {
width: 200px;
padding: 0.75rem;
border-radius: 16px;
background: #f9fafb;
transition: background 150ms ease;
text-align: center;
}
.block-collapsible__title {
font-size: 13px;
font-weight: 600;
color: #111827;
}
.block-collapsible__content {
margin-top: 0.25rem;
font-size: 12px;
color: #4b5563;
opacity: 0.7;
}
.block-collapsible:hover {
background: #eef2ff;
}
@media (prefers-color-scheme: dark) {
.block-collapsible {
background: #020617;
}
.block-collapsible__title {
color: #e5e7eb;
}
.block-collapsible__content {
color: #d1d5db;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Allows users to toggle content visibility
- Keeps layouts compact and organized
- Maintains accessibility with semantic structure
- Designed for optional detail sections
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.