{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "collapsible", "type": "registry:ui", "title": "Collapsible", "description": "A single show/hide disclosure built on native
/ — click, Space, or Enter toggle and the browser mirrors aria-expanded, all with zero JavaScript. A standalone disclosure, distinct from the grouped Accordion.", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ui/collapsible.tsx", "type": "registry:ui", "target": "components/ui/collapsible.tsx", "content": "/** @jsxImportSource hono/jsx */\nimport type { PropsWithChildren } from \"hono/jsx\"\nimport { cn, type ClassValue } from \"@/registry/lib/cn\"\n\n// Collapsible — shadcn-htmx, htmx v4 + Tailwind v4.\n//\n// shadcn upstream uses Radix Collapsible (a CollapsibleTrigger button + a\n// CollapsibleContent region wired together with aria-expanded / aria-controls\n// and JS state). We use the native HTML disclosure widget instead:\n//
Trigger...content...
\n// so the platform gives us, with zero JS:\n// - Click / Space / Enter toggles open (browser default on ).\n// - is implicitly role=\"button\", focusable, with its text as the\n// accessible name; the browser sets aria-expanded to mirror `open`.\n// - The content is the accessible description of the summary.\n//\n// This is the WAI-ARIA Disclosure (Show/Hide) pattern: a single button that\n// shows/hides one section of content. Distinct from Accordion — Collapsible\n// is a standalone, single show/hide, NOT a group, so there is no `name`\n// attribute and no exclusive grouping. No public/site.js hook is required:\n// the entire keyboard contract (Enter / Space) is native to .\n//\n// Refs:\n// repos/aria-practices/content/patterns/disclosure/disclosure-pattern.html\n// (Keyboard: Enter / Space toggle; role=button; aria-expanded true/false)\n// repos/mdn/files/en-us/web/html/reference/elements/details/index.md\n// (`open` boolean; implicit ARIA role=group; toggle event)\n// repos/mdn/files/en-us/web/html/reference/elements/summary/index.md\n// (click/Space toggles parent
; display:list-item marker)\n\ntype CollapsibleProps = PropsWithChildren<{\n // Pre-open the disclosure on initial render.\n open?: boolean\n disabled?: boolean\n class?: ClassValue\n}>\n\nexport function Collapsible(props: CollapsibleProps) {\n const { open, disabled, class: className, children, ...rest } = props\n return (\n \n {children}\n
\n )\n}\n\ntype CollapsibleTriggerProps = PropsWithChildren<{ class?: ClassValue }>\n\nexport function CollapsibleTrigger(props: CollapsibleTriggerProps) {\n const { class: className, children, ...rest } = props\n return (\n is open.\n \"[details[open]>&_[data-slot=collapsible-chevron]]:rotate-180\",\n className,\n )}\n {...rest}\n >\n {children}\n \n \n \n \n )\n}\n\ntype CollapsibleContentProps = PropsWithChildren<{ class?: ClassValue }>\n\nexport function CollapsibleContent(props: CollapsibleContentProps) {\n const { class: className, children, ...rest } = props\n return (\n \n {children}\n \n )\n}\n" }, { "path": "registry/jinja2/collapsible.html", "type": "registry:file", "target": "templates/components/collapsible.html", "content": "{# Collapsible macros — shadcn-htmx, htmx v4 + Tailwind v4.\n Mirrors registry/ui/collapsible.tsx. Native
/ single\n disclosure (WAI-ARIA Disclosure pattern). Enter/Space toggle and\n aria-expanded are all native to — zero JS.\n\n Distinct from accordion: a standalone show/hide, no group `name`.\n\n Usage:\n {% from \"components/collapsible.html\" import collapsible_open, collapsible_close,\n collapsible_trigger, collapsible_content_open, collapsible_content_close %}\n\n {{ collapsible_open(open=true) }}\n {{ collapsible_trigger(\"Can I use this without JS?\") }}\n {{ collapsible_content_open() }}\n Yes — it is native
/.\n {{ collapsible_content_close() }}\n {{ collapsible_close() }} #}\n\n{% macro collapsible_open(open=false, disabled=false, extra_class=\"\", attrs={}) -%}\n
\n{%- endmacro %}\n\n{% macro collapsible_close() %}
{% endmacro %}\n\n{% macro collapsible_trigger(text, extra_class=\"\") -%}\n&_[data-slot=collapsible-chevron]]:rotate-180 {{ extra_class }}\">\n {{ text }}\n \n \n \n\n{%- endmacro %}\n\n{% macro collapsible_content_open(extra_class=\"\") -%}\n
\n{%- endmacro %}\n\n{% macro collapsible_content_close() %}
{% endmacro %}\n" }, { "path": "registry/go-templates/collapsible.tmpl", "type": "registry:file", "target": "components/collapsible.tmpl", "content": "{{/*\n Collapsible templates — shadcn-htmx, htmx v4 + Tailwind v4.\n Mirrors registry/ui/collapsible.tsx. Native
/ single\n disclosure (WAI-ARIA Disclosure pattern). Enter/Space toggle and\n aria-expanded are native to — zero JS. No group `name`.\n\n Two named templates compose:\n - \"collapsible\" — full
with trigger + content\n - \"collapsible_trigger\" — just the (when composing manually)\n\n Usage:\n {{template \"collapsible\" (dict\n \"Title\" \"Can I use this without JS?\" \"Open\" true\n \"Body\" (htmlSafe \"Yes — it is native
/.\")\n )}}\n*/}}\n\n{{/* .Attrs (htmlSafe) forwards hx-* / global attributes onto the
\n so the native `toggle` event it fires can drive zero-JS lazy loading:\n hx-trigger=\"toggle once\" hx-get=... (toggle event: HTMLElement;\n hx-trigger accepts any DOM event). */}}\n{{define \"collapsible\"}}\n
\n {{template \"collapsible_trigger\" (dict \"Text\" .Title)}}\n
{{.Body}}
\n
\n{{end}}\n\n{{define \"collapsible_trigger\"}}\n&_[data-slot=collapsible-chevron]]:rotate-180\">\n {{.Text}}\n \n \n \n\n{{end}}\n" }, { "path": "registry/phoenix/collapsible.ex", "type": "registry:file", "target": "lib/my_app_web/components/collapsible.ex", "content": "defmodule ShadcnHtmx.Components.Collapsible do\n @moduledoc \"\"\"\n Collapsible — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.\n\n Native `
` + `` single disclosure (WAI-ARIA Disclosure\n pattern). Enter/Space toggle, focusable summary, and the browser-managed\n aria-expanded are all native — zero JS.\n\n Distinct from accordion: a standalone show/hide, not a group, so there is\n no `name` attribute and no exclusive grouping.\n\n ## Examples\n\n <.collapsible open>\n <.collapsible_trigger>Can I use this without JS?\n <.collapsible_content>Yes — it is native <details>/<summary>.\n \n \"\"\"\n\n use Phoenix.Component\n\n attr :open, :boolean, default: false\n attr :disabled, :boolean, default: false\n attr :class, :string, default: nil\n attr :rest, :global\n slot :inner_block, required: true\n\n def collapsible(assigns) do\n ~H\"\"\"\n \n {render_slot(@inner_block)}\n
\n \"\"\"\n end\n\n attr :class, :string, default: nil\n attr :rest, :global\n slot :inner_block, required: true\n\n def collapsible_trigger(assigns) do\n ~H\"\"\"\n &_[data-slot=collapsible-chevron]]:rotate-180\",\n @class\n ]}\n {@rest}\n >\n {render_slot(@inner_block)}\n \n \n \n
\n \"\"\"\n end\n\n attr :class, :string, default: nil\n attr :rest, :global\n slot :inner_block, required: true\n\n def collapsible_content(assigns) do\n ~H\"\"\"\n
\n {render_slot(@inner_block)}\n
\n \"\"\"\n end\nend\n" }, { "path": "registry/html/collapsible.html", "type": "registry:file", "target": "snippets/collapsible.html", "content": "\n\n
\n &_[data-slot=collapsible-chevron]]:rotate-180\">\n Can I use this without JavaScript?\n \n \n \n \n
\n Yes. The open/close toggle, keyboard handling (Space / Enter), focus, and\n aria-expanded are all native to <details>/<summary>.\n
\n
\n" } ] }