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. This demo demonstrates how to bind the component to a flat collection of data items. The code does the following:

• Uses the Data property to specify the data source.
• Adds the <DataMappings> tag to the component markup.
• Creates the DxAccordionDataMapping instance and maps item properties to data source fields. Mappings adjust the Accordion's data model to match the data source. Since this demo uses flat data, the Key and ParentKey properties are required.

The Accordion control includes a built-in item filter UI. Enable the ShowFilterPanel property to activate the search panel. If a user types in a search string, the component displays only matching nodes. You can also use the CustomFilter property to implement custom filter logic. Use the FilterString property to specify the 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.