Collapsible

One "show more" section.

JavaScript off: what the HTML and CSS do on their own.

Usage

razor

<Collapsible Label="Advanced options">
    <TextField @bind-Value="Model!.BuildCommand" />
</Collapsible>

A native details element without an accordion's frame, so it opens and closes with JavaScript off too. Use it for one section most people can skip; for several, use an Accordion, and for a panel over the page, a Popover.

Show more

Use Label for the text beside the chevron, for advanced options or details most people can skip.

Preview Code

Preview

Deploys run on every push to main and take about two minutes.

Advanced options

Build command: npm run build
Output folder: dist
Node version: 22

Code

ShowMore.razor

<Stack Gap="2" MaxWidth="32.Rem">
    <TextBlock>Deploys run on every push to main and take about two minutes.</TextBlock>
    <Collapsible Label="Advanced options">
        <DescriptionList Size="ControlSize.Sm">
            <DescriptionItem Term="Build command">npm run build</DescriptionItem>
            <DescriptionItem Term="Output folder">dist</DescriptionItem>
            <DescriptionItem Term="Node version">22</DescriptionItem>
        </DescriptionList>
    </Collapsible>
</Stack>

Your own trigger

Use Trigger for inline content of your own in place of the label and chevron.

Preview Code

Preview

Why is this free?

The core library is open source under the MIT license. Paid plans add hosting and support.

Code

CustomTrigger.razor

<Collapsible MaxWidth="32.Rem">
    <Trigger><Badge Status="Status.Info" StartIcon="Lucide.Info">Why is this free?</Badge></Trigger>
    <ChildContent>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted" MarginTop="2">The core library is open source under the MIT license. Paid plans add hosting and support.</TextBlock>
    </ChildContent>
</Collapsible>

Open from the server or C#

Use Open to start it open, such as when a post left an error inside it, and @bind-Open on an interactive page to follow it or open it from C#.

razor

@* Open after a post that found a problem in the advanced options. *@
<Collapsible Label="Advanced options" Open="_advancedInvalid">…</Collapsible>

@* Interactive pages: follow it, or open it from C#. *@
<Collapsible Label="Details" @bind-Open="_detailsOpen">…</Collapsible>

The browser keeps it open or closed, not the server: on a static page a post or reload draws it as Open says.

Mode support

What works in each mode, Collapsible
Feature	Off	Static	Live
Opens and closes	Yes	Yes	Yes
Open bound to C#	No	No	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

The summary takes Enter and Space and is announced as expanded or collapsed by the browser, with JavaScript off too.
Label or Trigger is the trigger's name, and one is required; the chevron is hidden.
Trigger content is drawn inside the summary, so keep it to inline content, with no links or buttons.
The trigger isn't a heading; put a Heading before it if the section needs one.

Parameters

Collapsible parameters
Prop	Type	Default
`Label`The trigger text, after a chevron.	`string?`
`Trigger`Custom trigger content, in place of Label and the chevron.	`RenderFragment?`
`ChildContent`The hidden content.	`RenderFragment?`
`@bind-Open`Whether it is open.	`bool`	`false`
`Id`The element id.	`string?`

Plus 16 item props and 4 common props.

Full API