Collapsible
An interactive component which expands and collapses a panel.
Basic Collapsible
A BitBhCollapsibleTrigger toggles a BitBhCollapsibleContent panel.
aria-expanded, aria-controls, and aria-labelledby
are wired automatically.
@peduarte starred 3 repositories
@radix-ui/primitives
@radix-ui/colors
@radix-ui/themes
<BitBhCollapsible class="collapsible">
<div class="collapsible-header">
<span>@peduarte starred 3 repositories</span>
<BitBhCollapsibleTrigger class="collapsible-trigger">▾</BitBhCollapsibleTrigger>
</div>
<div class="collapsible-row">@radix-ui/primitives</div>
<BitBhCollapsibleContent class="collapsible-content">
<div class="collapsible-row">@radix-ui/colors</div>
<div class="collapsible-row">@radix-ui/themes</div>
</BitBhCollapsibleContent>
</BitBhCollapsible>/* All styles are consumer-authored — the library ships zero CSS */
.collapsible {
width: 100%;
border: 1px solid #e4e4e7;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.collapsible-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.875rem 1.125rem;
font-weight: 500;
}
.collapsible-trigger {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 0.375rem;
cursor: pointer;
color: #71717a;
}
.collapsible-trigger:hover { background: #f4f4f5; }
.collapsible-trigger:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.collapsible-trigger[data-disabled]{ opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.collapsible-row {
padding: 0.75rem 1.125rem;
color: #71717a;
border-top: 1px solid #e4e4e7;
}Default Open
Set DefaultOpen="true" to render the panel open initially (uncontrolled).
Already open
I'm open by default. Click the trigger to close me.
<BitBhCollapsible DefaultOpen="true" class="collapsible">
<div class="collapsible-header">
<span>Already open</span>
<BitBhCollapsibleTrigger class="collapsible-trigger">▾</BitBhCollapsibleTrigger>
</div>
<BitBhCollapsibleContent class="collapsible-content">
<div class="collapsible-row">I'm open by default. Click the trigger to close me.</div>
</BitBhCollapsibleContent>
</BitBhCollapsible>/* All styles are consumer-authored — the library ships zero CSS */
.collapsible {
width: 100%;
border: 1px solid #e4e4e7;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.collapsible-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.875rem 1.125rem;
font-weight: 500;
}
.collapsible-trigger {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 0.375rem;
cursor: pointer;
color: #71717a;
}
.collapsible-trigger:hover { background: #f4f4f5; }
.collapsible-trigger:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.collapsible-trigger[data-disabled]{ opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.collapsible-row {
padding: 0.75rem 1.125rem;
color: #71717a;
border-top: 1px solid #e4e4e7;
}Render Context (rotating chevron + Close)
BitBhCollapsibleTrigger and BitBhCollapsibleContent expose a
BitBhCollapsibleRenderContext via Context="c". Use it to drive UI
from the open state and to call c.Close() from anywhere inside.
What's inside?
You can close me from inside the content:
<BitBhCollapsible class="collapsible">
<div class="collapsible-header">
<span>What's inside?</span>
<BitBhCollapsibleTrigger class="collapsible-trigger">
<Template Context="c">
<span class="collapsible-chevron @(c.IsOpen ? "open" : "")">▾</span>
</Template>
</BitBhCollapsibleTrigger>
</div>
<BitBhCollapsibleContent class="collapsible-content">
<Template Context="c">
<div class="collapsible-row">
<p>You can close me from inside the content:</p>
<button class="btn" @onclick="c.Close">Close panel</button>
</div>
</Template>
</BitBhCollapsibleContent>
</BitBhCollapsible>/* All styles are consumer-authored — the library ships zero CSS */
.collapsible {
width: 100%;
border: 1px solid #e4e4e7;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.collapsible-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.875rem 1.125rem;
font-weight: 500;
}
.collapsible-trigger {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 0.375rem;
cursor: pointer;
color: #71717a;
}
.collapsible-trigger:hover { background: #f4f4f5; }
.collapsible-trigger:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.collapsible-row {
padding: 0.75rem 1.125rem;
color: #71717a;
border-top: 1px solid #e4e4e7;
}
/* Rotating chevron driven by BitBhCollapsibleRenderContext.IsOpen */
.collapsible-chevron { display: inline-block; transition: transform 200ms ease; }
.collapsible-chevron.open { transform: rotate(180deg); }
/* "Close panel" button rendered inside the content */
.btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
padding: 0.45rem 0.85rem;
border: 1px solid #e4e4e7;
border-radius: 0.5rem;
background: #fff;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
}
.btn:hover { background: #f4f4f5; }Disabled
Set Disabled="true" on the root to block interaction. The trigger receives
both the native disabled attribute and a data-disabled hook.
Can't toggle me
You'll never see this content.
<BitBhCollapsible Disabled="true" class="collapsible">
<div class="collapsible-header">
<span>Can't toggle me</span>
<BitBhCollapsibleTrigger class="collapsible-trigger">▾</BitBhCollapsibleTrigger>
</div>
<BitBhCollapsibleContent class="collapsible-content">
<div class="collapsible-row">You'll never see this content.</div>
</BitBhCollapsibleContent>
</BitBhCollapsible>/* All styles are consumer-authored — the library ships zero CSS */
.collapsible {
width: 100%;
border: 1px solid #e4e4e7;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.collapsible-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.875rem 1.125rem;
font-weight: 500;
}
.collapsible-trigger {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 0.375rem;
cursor: pointer;
color: #71717a;
}
.collapsible-trigger:hover { background: #f4f4f5; }
.collapsible-trigger:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.collapsible-trigger[data-disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.collapsible-row {
padding: 0.75rem 1.125rem;
color: #71717a;
border-top: 1px solid #e4e4e7;
}
/* The root <BitBhCollapsible> element also receives data-disabled — useful for
dimming the entire region. */
.collapsible[data-disabled] {
background: #fafafa;
}Controlled
Drive the open state externally with Open + OnOpenChange.
The button below opens or closes the collapsible programmatically.
Open: false
Internal trigger
Either trigger updates the same state — fully controlled.
<div style="display:flex; flex-direction:column; gap:1rem; width:100%">
<div class="demo-row">
<BitBhButton OnClick="ToggleControlled" class="btn">
Toggle from outside
</BitBhButton>
<span class="demo-output">Open: @controlledOpen.ToString().ToLowerInvariant()</span>
</div>
<BitBhCollapsible Open="controlledOpen"
OnOpenChange="v => controlledOpen = v"
class="collapsible">
<div class="collapsible-header">
<span>Internal trigger</span>
<BitBhCollapsibleTrigger class="collapsible-trigger">▾</BitBhCollapsibleTrigger>
</div>
<BitBhCollapsibleContent class="collapsible-content">
<div class="collapsible-row">
Either trigger updates the same state — fully controlled.
</div>
</BitBhCollapsibleContent>
</BitBhCollapsible>
</div>
@code {
private bool controlledOpen;
private void ToggleControlled() => controlledOpen = !controlledOpen;
}/* All styles are consumer-authored — the library ships zero CSS */
.collapsible {
width: 100%;
border: 1px solid #e4e4e7;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.collapsible-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.875rem 1.125rem;
font-weight: 500;
}
.collapsible-trigger {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 0.375rem;
cursor: pointer;
color: #71717a;
}
.collapsible-trigger:hover { background: #f4f4f5; }
.collapsible-trigger:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.collapsible-row {
padding: 0.75rem 1.125rem;
color: #71717a;
border-top: 1px solid #e4e4e7;
}
/* External trigger row + state readout */
.demo-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
.demo-output {
font-size: 0.875rem;
color: #71717a;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.85rem;
border: 1px solid #e4e4e7;
border-radius: 0.5rem;
background: #fff;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
}
.btn:hover { background: #f4f4f5; }