Edit Collapse

Name

Also known as (comma separated)

Brief definition Hide previously visible content.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Section title", "default": "Advanced options" }, { "id": "bodyText", "type": "text", "label": "Body text", "default": "These settings are rarely needed but available if you want them." }, { "id": "collapsed", "type": "toggle", "label": "Collapsed", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 20, "step": 2 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"collapse-demo\" style=\"--accent:{{accent}};border-radius:{{radius}}px;\">\n <button type=\"button\" class=\"collapse-demo__head\"{{#if collapsed}} aria-expanded=\"false\"{{/if}}{{unless collapsed}} aria-expanded=\"true\"{{/unless}}>\n <span class=\"collapse-demo__chevron{{#unless collapsed}} is-open{{/unless}}\">&#9656;</span>{{title}}\n </button>\n {{unless collapsed}}<div class=\"collapse-demo__body\"><p>{{bodyText}}</p></div>{{/unless}}\n</div>\n<style>\n.collapse-demo { width: 300px; font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143022; overflow: hidden; }\n.collapse-demo__head { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: transparent; border: none; font: inherit; font-weight: 600; cursor: pointer; text-align: left; color: inherit; }\n.collapse-demo__chevron { display: inline-block; color: var(--accent); }\n@media (prefers-reduced-motion: no-preference) {\n.collapse-demo__chevron { transition: transform .15s; }\n}\n.collapse-demo__chevron.is-open { transform: rotate(90deg); }\n.collapse-demo__body { padding: 0 14px 14px; font-size: 13px; color: #241430cc; }\n.collapse-demo__body p { margin: 0; }\n</style>", "tailwind": "<div class=\"w-[300px]\" style=\"font-family:system-ui,sans-serif;color:#241430;background:#FAF7F2;border:1.5px solid #24143022;border-radius:{{radius}}px;overflow:hidden\">\n <button type=\"button\" class=\"w-full box-border flex items-center gap-2 px-3.5 py-3 bg-transparent border-0 font-semibold cursor-pointer text-left\"{{#if collapsed}} aria-expanded=\"false\"{{/if}}{{unless collapsed}} aria-expanded=\"true\"{{/unless}}>\n <span class=\"collapse-tw-chevron{{#unless collapsed}} is-open{{/unless}} inline-block motion-safe:transition-transform\" style=\"color:{{accent}}\">&#9656;</span>{{title}}\n </button>\n {{unless collapsed}}<div class=\"px-3.5 pb-3.5 text-[13px] text-[#241430cc]\"><p class=\"m-0\">{{bodyText}}</p></div>{{/unless}}\n</div>\n<style>\n.collapse-tw-chevron.is-open { transform: rotate(90deg); }\n</style>", "react": "import { useState } from \"react\";\n\nexport function Collapse({\n title = \"{{title}}\",\n bodyText = \"{{bodyText}}\",\n collapsed: initialCollapsed = {{collapsed}},\n accent = \"{{accent}}\",\n radius = {{radius}},\n}) {\n const [collapsed, setCollapsed] = useState(initialCollapsed);\n return (\n <div style={{ width: 300, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\", background: \"#FAF7F2\", border: \"1.5px solid #24143022\", borderRadius: radius, overflow: \"hidden\" }}>\n <button type=\"button\" onClick={() => setCollapsed((c) => !c)} aria-expanded={!collapsed}\n style={{ width: \"100%\", boxSizing: \"border-box\", display: \"flex\", alignItems: \"center\", gap: 8, padding: \"12px 14px\", background: \"transparent\", border: \"none\", font: \"inherit\", fontWeight: 600, cursor: \"pointer\", textAlign: \"left\", color: \"inherit\" }}>\n <span className=\"collapse-caret\" style={{ display: \"inline-block\", color: accent, transform: collapsed ? \"none\" : \"rotate(90deg)\" }}>&#9656;</span>{title}\n </button>\n {!collapsed && <div style={{ padding: \"0 14px 14px\", fontSize: 13, color: \"#241430cc\" }}><p style={{ margin: 0 }}>{bodyText}</p></div>}\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .collapse-caret { transition: transform .15s; }\n }\n `}</style>\n </div>\n );\n}" }