Content Render Mode in Blazor Accordion

14 Aug 20263 minutes to read

The Blazor Accordion lets you render all AccordionItem contents at initial load and keep them in the DOM. To enable this behavior, set the LoadOnDemand property of the SfAccordion to false.

The default value of the LoadOnDemand property is true. When true, each item’s content is rendered the first time the panel is expanded and is removed from the DOM when the panel is collapsed.

Available properties

Property Type Default Description
LoadOnDemand bool true When true, content is rendered on demand (lazy) and removed from the DOM when the panel collapses. When false, every item’s content is rendered up front and kept in the DOM.

Example: render all panel contents on initial load

@using Syncfusion.Blazor.Navigations

<SfAccordion LoadOnDemand="false">
    <AccordionItems>
        <AccordionItem Header="Margaret Peacock" Content="Margaret Peacock was born on 01 December 1990. She now lives at Coventry House Miner Rd., London, UK. Margaret holds the position of Sales Coordinator in our WA department (Seattle, USA). She joined our company on 01 May 2010."></AccordionItem>
        <AccordionItem Header="Laura Callahan" Content="Laura Callahan was born on 06 November 1990. She now lives at Edgeham Hollow Winchester Way, London, UK. Laura holds the position of Sales Coordinator in our WA department (Seattle, USA). She joined our company on 01 May 2010."></AccordionItem>
        <AccordionItem Header="Albert Dodsworth" Content="Albert Dodsworth was born on 19 October 1989. He now lives at 4726 - 11th Ave. N.E., Seattle, USA. Albert holds the position of Sales Representative in our WA department (Seattle, USA). He joined our company on 01 May 2009."></AccordionItem>
    </AccordionItems>
</SfAccordion>

With LoadOnDemand="false", opening the browser’s DevTools and inspecting the DOM shows every panel’s content element present in the document regardless of the expanded state. With LoadOnDemand="true" (the default), only the expanded panel’s content is present until that item is expanded for the first time.

Property Purpose
LoadOnDemand Controls whether each panel’s content is rendered only on demand (default) or all at once on initial load.
ExpandMode Sets single or multiple expand behavior.
ExpandedIndices One-way binds the indices of currently expanded items.
Expanded / ExpandedChanged (on AccordionItem) Two-way binds the expanded state of a single item.

LoadOnDemand does not control animation duration or the expand mode; it only controls when the panel’s content is created in the DOM.

See also