The DevExpress Accordion for Blazor allows you to display collapsible panels and better organize information on pages with space constraints. You can also use this component as a navigation control and arrange navigation links within a multi-level UI structure. In addition, our Blazor Accordion control includes built-in filter UI elements to help users to locate information displayed within the component.

The Accordion stores its root-level elements in the Items collection. For each item, you can specify its text, icon, and child items or collapsible content. Items can be expanded or collapsed using the slide animation effect.

The following properties help manage a user’s ability to expand and collapse items:

• ExpandMode — Specifies how many items can be expanded at a given point in time.
• ExpandCollapseAction — Specifies the action that expands or collapses the item.

The Accordion component also supports keyboard navigation. Press the Tab key or Shift+Tab to focus the Accordion and use Arrow keys to navigate through items.

You can populate the Accordion component with data from a flat or hierarchical data source. The demo binds the component to a flat collection of data items:

• Uses the Data property to specify the data source.
• Adds the <DataMappings> tag to component markup.
• Creates a DxAccordionDataMapping instance and maps item properties to data source fields. Mappings modify the Accordion data model to match the data source. Since this demo uses flat data, the Key and ParentKey properties are required to build parent-child relationships.
• Specifies when the Accordion component renders items content into the DOM. The demo uses on-demand render mode to add content to the DOM on the first expand and keeps it in the DOM after the item is collapsed. On-demand render mode balances initial page load performance, responsiveness, and resource consumption.

The Accordion control includes a built-in item filter UI. Enable the ShowFilterPanel property to activate the search panel. If a user enters a search string, the component displays only matching items. You can also use the CustomFilter property to implement custom filter logic. Use the FilterString property to specify filter criteria in code.

In this demo, root items display their expand and collapse buttons to the right (RootItemExpandButtonDisplayMode property). Non-root items use custom button icons (SubItemCollapseButtonIconCssClass and SubItemExpandButtonIconCssClass properties).

Our Blazor Accordion component allows users to select a single item. The selected item is highlighted automatically.

To select an Accordion item, use one of the following options:

• Click an item header to select the corresponding item;
• Call the SelectItem method to select an item in code;
• The component can automatically select an item based on the item's NavigateUrl property and the current browser URL. Use the UrlMatchMode property to enable this capability.

To force the Accordion to select a single item, set the SelectionMode property to Single. You can also use the DxAccordionItem.AllowSelection property in unbound mode and the DxAccordionDataMappingBase.AllowSelection property in bound mode to prevent users from selecting specific items. Handle the SelectionChanged event to react to selection changes. Call the ClearSelection() method to deselect items.