Clicks: @clickCount, last OnChange: @lastChange

Expanded: @expandCount, collapsed: @collapseCount, refused: @refusedCount

``` ```csharp private int clickCount; private bool lastChange; private int expandCount; private int collapseCount; private int refusedCount; private bool lockAccordion; private void HandleOnToggling(BitAccordionToggleArgs args) { if (args.IsExpanding || lockAccordion is false) return; args.Cancel = true; refusedCount++; } ``` \n**Programmatic control**: ```razor Expand Collapse Toggle Expand & focus Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. ``` ```csharp private BitAccordion accordionRef = default!; ``` \n**Content rendering**: ```razor @foreach (var order in orders) {

@order

} ``` ```csharp private string[] orders = []; private async Task LoadOrders(BitAccordionToggleArgs args) { if (args.IsExpanding is false || orders.Length > 0) return; await Task.Delay(1500); // e.g. await Http.GetFromJsonAsync("api/orders") orders = ["#1001 - 2 items", "#1002 - 5 items", "#1003 - 1 item"]; } ``` \n**MaxHeight & Transition**: ```razor Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. These placeholder words symbolize the beginning - a moment of possibility where creativity has yet to take shape. Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and inspirations will be built. Soon, these lines will transform into narratives that provoke thought, spark emotion, and resonate with those who encounter them. This space is yours to craft, yours to shape. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. ``` \n**Find & print**: ```razor Citrus like the tangerine ships overnight in insulated boxes; berries ship on the next business day. Orders can be changed until they are packed, usually within two hours of checkout. Returns are free within thirty days of delivery. ``` \n**Templates**: ```razor Advanced settings Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. @(isExpanded ? "Less" : "More") Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.

HeaderTemplate @(isExpanded ? "Open" : "Closed")

Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. ``` `BitAccordionDemo.razor.scss`: ```scss .custom-header { gap: 1rem; flex-grow: 1; display: flex; line-height: 1.5; align-items: center; } .custom-title { font-weight: 600; color: var(--bit-clr-pri); } .custom-desc { color: var(--bit-clr-fg-sec); } ``` \n**Read-only**: ```razor Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. ``` ```csharp private int readOnlyClickCount; ``` \n**Accessibility**: ```razor A link Tab only reaches while this panel is open. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. ``` \n**Cascading parameters**: ```razor Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. ``` ```csharp private readonly BitAccordionParams[] accordionParams = [ new() { HiddenUntilFound = true, ExpanderIconName = BitIconName.Add, ExpandedExpanderIconName = BitIconName.Remove, ExpanderIconPlacement = BitPlacement.Start, } ]; ``` \n**Color**: ```razor

Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.

Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. ``` ```csharp private BitColorKind backgroundColorKind = BitColorKind.Primary; private BitColorKind borderColorKind = BitColorKind.Primary; ``` \n**External Icons**: ```razor ExpanderIcon=@("fa-solid fa-chevron-down") Icon="@BitIconInfo.Fa("solid gear")" ExpanderIcon="@BitIconInfo.Css("bi bi-chevron-down")" Icon="@BitIconInfo.Bi("gear")" ``` \n**Size**: ```razor Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. ``` \n**Style & Class**: ```razor Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.

Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.

``` `BitAccordionDemo.razor.scss`: ```scss .faq-accordions { gap: 0.5rem; display: flex; flex-flow: column; // The variables inherit, so one block on an ancestor re-skins every accordion underneath it. --bit-Accordion-radius: 0.75rem; --bit-Accordion-header-padding: 1rem 1.25rem; --bit-Accordion-content-padding: 1rem 1.25rem; --bit-Accordion-border-color: color-mix(in srgb, var(--bit-clr-pri) 35%, transparent); --bit-Accordion-header-hover-background: color-mix(in srgb, var(--bit-clr-pri) 8%, transparent); --bit-Accordion-header-active-background: color-mix(in srgb, var(--bit-clr-pri) 16%, transparent); --bit-Accordion-header-expanded-background: color-mix(in srgb, var(--bit-clr-pri) 12%, transparent); --bit-Accordion-divider-color: color-mix(in srgb, var(--bit-clr-pri) 35%, transparent); --bit-Accordion-title-color: var(--bit-clr-pri); --bit-Accordion-expander-color: var(--bit-clr-pri); } ::deep { .custom-class { border-color: blueviolet; background-color: color-mix(in srgb, blueviolet 12%, transparent); } .custom-acd-title { color: tomato; font-style: italic; } .custom-acd-content { font-family: monospace; } } ``` \n**RTL**: ```razor لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. ```