Collapse
Expandable content panel using native HTML details/summary. No JavaScript required.
Basic Usage
Click the trigger to expand and reveal hidden content.
Click to expand
This is the hidden content that appears when you click the trigger. It can contain any content including text, components, and more.
FAQ Pattern
Multiple collapse panels stacked for FAQ or accordion-style layouts.
What is FLIN?
FLIN is a full-stack programming language designed for building web applications quickly. The name comes from the Fongbe phrase "it remembers things."
How do I get started?
Install the FLIN CLI, create a new project directory, and start the dev server. Your first page is just a .flin file in the app/ folder.
Is FLIN free?
Yes! FLIN is completely free to use for personal, educational, and commercial projects. Download, build, and deploy — no fees.
Rich Content
Collapse panels can contain any components including rows, badges, and icons.
System Requirements
Operating SystemmacOS, Linux, Windows
Disk Space50 MB
Memory256 MB
Settings Sections
Group related settings behind collapsible headers to reduce visual clutter.
Profile Settings
Notification Preferences
Email notificationsOn
Push notificationsOff
Legal Sections
Hide lengthy legal text behind expandable sections for cleaner pages.
Terms of Service
Privacy Policy
In Card
Nest Collapse inside Card for structured expandable content.
Order Details
View Items (3)
Widget Pro$29.99
Premium Plan$9.99
Shipping$5.00
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Details" | Trigger text shown in the collapsed state |
children | content | - | Content revealed when expanded |