Disclosure
A single show/hide region toggled by a button — the simplest collapsible primitive.
Basic Disclosure
Renders a button and a panel. Clicking the button toggles the panel.
aria-expanded, aria-controls, and aria-labelledby
are wired automatically.
Disclosure is the simpler sibling of Accordion: one trigger, one panel,
zero coordination across siblings.
<BitBhDisclosure class="disclosure">
<BitBhDisclosureButton class="disclosure-button">
Show details
</BitBhDisclosureButton>
<BitBhDisclosurePanel class="disclosure-panel">
<div class="disclosure-body">
Disclosure is the simpler sibling of Accordion: one trigger, one panel,
zero coordination across siblings.
</div>
</BitBhDisclosurePanel>
</BitBhDisclosure>/* All styles are consumer-authored — the library ships zero CSS */
.disclosure {
width: 100%;
border: 1px solid #e4e4e7;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.disclosure-button {
all: unset;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.875rem 1.125rem;
font-weight: 500;
cursor: pointer;
box-sizing: border-box;
}
.disclosure-button:hover { background: #f4f4f5; }
.disclosure-button:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.disclosure-button[data-state="open"] { background: #f4f4f5; }
.disclosure-button[data-disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.disclosure-body {
padding: 0.875rem 1.125rem 1rem;
color: #71717a;
border-top: 1px solid #e4e4e7;
}Default Open
Set DefaultOpen="true" to render the panel open initially (uncontrolled).
I'm open by default. Click the button to close me.
<BitBhDisclosure DefaultOpen="true" class="disclosure">
<BitBhDisclosureButton class="disclosure-button">
Already open
</BitBhDisclosureButton>
<BitBhDisclosurePanel class="disclosure-panel">
<div class="disclosure-body">
I'm open by default. Click the button to close me.
</div>
</BitBhDisclosurePanel>
</BitBhDisclosure>/* All styles are consumer-authored — the library ships zero CSS */
.disclosure {
width: 100%;
border: 1px solid #e4e4e7;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.disclosure-button {
all: unset;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.875rem 1.125rem;
font-weight: 500;
cursor: pointer;
box-sizing: border-box;
}
.disclosure-button:hover { background: #f4f4f5; }
.disclosure-button:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.disclosure-button[data-state="open"] { background: #f4f4f5; }
.disclosure-button[data-disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.disclosure-body {
padding: 0.875rem 1.125rem 1rem;
color: #71717a;
border-top: 1px solid #e4e4e7;
}Render Context (rotating chevron + Close)
BitBhDisclosure, BitBhDisclosureButton, and BitBhDisclosurePanel
all expose a BitBhDisclosureRenderContext via Context="d". Use it
to drive UI from the open state and to call d.Close() from anywhere inside.
You can close me from inside the panel:
<BitBhDisclosure class="disclosure">
<BitBhDisclosureButton class="disclosure-button">
<Template Context="d">
<span>What's inside?</span>
<span class="disclosure-chevron @(d.IsOpen ? "open" : "")">▾</span>
</Template>
</BitBhDisclosureButton>
<BitBhDisclosurePanel class="disclosure-panel">
<Template Context="d">
<div class="disclosure-body">
<p>You can close me from inside the panel:</p>
<button class="btn" @onclick="d.Close">Close panel</button>
</div>
</Template>
</BitBhDisclosurePanel>
</BitBhDisclosure>/* All styles are consumer-authored — the library ships zero CSS */
.disclosure {
width: 100%;
border: 1px solid #e4e4e7;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.disclosure-button {
all: unset;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.875rem 1.125rem;
font-weight: 500;
cursor: pointer;
box-sizing: border-box;
}
.disclosure-button:hover { background: #f4f4f5; }
.disclosure-button:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.disclosure-button[data-state="open"] { background: #f4f4f5; }
.disclosure-button[data-disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.disclosure-body {
padding: 0.875rem 1.125rem 1rem;
color: #71717a;
border-top: 1px solid #e4e4e7;
}
/* Rotating chevron driven by BitBhDisclosureRenderContext.IsOpen */
.disclosure-chevron { transition: transform 200ms ease; color: #71717a; }
.disclosure-chevron.open { transform: rotate(180deg); }
/* "Close panel" button rendered inside the panel */
.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; }Disabled
Set Disabled="true" on the root to block interaction. The button receives
both the native disabled attribute and a data-disabled hook.
You'll never see this content.
<BitBhDisclosure Disabled="true" class="disclosure">
<BitBhDisclosureButton class="disclosure-button">Can't toggle me</BitBhDisclosureButton>
<BitBhDisclosurePanel class="disclosure-panel">
<div class="disclosure-body">You'll never see this content.</div>
</BitBhDisclosurePanel>
</BitBhDisclosure>/* All styles are consumer-authored — the library ships zero CSS */
.disclosure {
width: 100%;
border: 1px solid #e4e4e7;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.disclosure-button {
all: unset;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.875rem 1.125rem;
font-weight: 500;
cursor: pointer;
box-sizing: border-box;
}
.disclosure-button:hover { background: #f4f4f5; }
.disclosure-button:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.disclosure-button[data-state="open"] { background: #f4f4f5; }
.disclosure-button[data-disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.disclosure-body {
padding: 0.875rem 1.125rem 1rem;
color: #71717a;
border-top: 1px solid #e4e4e7;
}
/* The root <BitBhDisclosure> element also receives data-disabled — useful for
dimming the entire region. */
.disclosure[data-disabled] {
background: #fafafa;
}Controlled
Drive the open state externally with Open + OnOpenChange.
The button below opens or closes the disclosure programmatically.
Open: false
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>
<BitBhDisclosure Open="controlledOpen"
OnOpenChange="v => controlledOpen = v"
class="disclosure">
<BitBhDisclosureButton class="disclosure-button">
Internal trigger
</BitBhDisclosureButton>
<BitBhDisclosurePanel class="disclosure-panel">
<div class="disclosure-body">
Either trigger updates the same state — fully controlled.
</div>
</BitBhDisclosurePanel>
</BitBhDisclosure>
</div>
@code {
private bool controlledOpen;
private void ToggleControlled() => controlledOpen = !controlledOpen;
}/* All styles are consumer-authored — the library ships zero CSS */
.disclosure {
width: 100%;
border: 1px solid #e4e4e7;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.disclosure-button {
all: unset;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.875rem 1.125rem;
font-weight: 500;
cursor: pointer;
box-sizing: border-box;
}
.disclosure-button:hover { background: #f4f4f5; }
.disclosure-button:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.disclosure-button[data-state="open"] { background: #f4f4f5; }
.disclosure-button[data-disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.disclosure-body {
padding: 0.875rem 1.125rem 1rem;
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; }