Free Component
Animated Fluid Accordion
A smooth height-animating accordion component utilizing modern CSS grid-template-rows expansion with chevron rotation.
Colours in this gradient
#0f172a#3b82f6#818cf8#ffffff
background: ;The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="acc-stage">
<div class="acc-wrapper">
<div class="acc-item is-open" id="accItem1">
<button class="acc-trigger" onclick="this.parentElement.classList.toggle('is-open')">
<span class="acc-title">How does distributed vector sharding work?</span>
<span class="acc-chevron">›</span>
</button>
<div class="acc-panel">
<div class="acc-inner">
Vectors are partitioned across hash rings based on cosine cluster locality. Queries are fanned out in parallel with sub-5ms scatter-gather aggregation.
</div>
</div>
</div>
<div class="acc-item" id="accItem2">
<button class="acc-trigger" onclick="this.parentElement.classList.toggle('is-open')">
<span class="acc-title">Can I deploy on isolated private VPC subnets?</span>
<span class="acc-chevron">›</span>
</button>
<div class="acc-panel">
<div class="acc-inner">
Yes. Enterprise plans support AWS PrivateLink, Azure Virtual Network peering, and GCP Cloud Interconnect with zero public internet routing.
</div>
</div>
</div>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.
Create a fluid height-animating accordion component using modern CSS grid-template-rows in HTML and CSS. Requirements: - Seamless zero-to-auto height transition using display: grid and grid-template-rows: 0fr to 1fr. - Rotating chevron indicator. - Scoped dark styling with border-color highlight on open items. - Zero external libraries. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Use modern CSS grid technique with grid-template-rows: 0fr on the panel.
- 2
Expand to grid-template-rows: 1fr when .is-open class is applied.
- 3
Keep overflow: hidden on the inner content div.
Customisation tips
- Using grid-template-rows 0fr to 1fr completely solves the classic CSS max-height transition timing problem.