[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Collapse]Navigation Controls
   [Collapse]Accordion Control
     Getting Started
    [Expand]Accordion Items
    [Expand]Data Binding
     Expanding and Collapsing
     View Mode
     Collapse Mode
    [Expand]Visual Elements
   [Expand]Breadcrumb Control
   [Expand]Navigation Bar
    Office Navigation Bar
    TileNav Pane
    Tile Bar
   [Expand]Wizard Control
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Collapse Mode

You can collapse the AccordionControl to free up space. The collapsed AccordionControl displays its items in a popup window:

This topic contains the following sections:

Expanded Expand-Collapse Button

End-users can expand/collapse the AccordionControl by clicking the expand-collapse button at the top right corner:

Set the AccordionControl.IsCollapseButtonVisible property to true to show this button:

Expanded Specifying Mode in Code

You can specify the AccordionControl.IsExpanded property to show the AccordionControl in the expand or collapse mode.

The code sample below shows the AccordionControl in the collapse mode:

Expanded Summary Item

The Summary Item is the AccordionControl's element that allows invoking a popup window with all accordion items:

Use the following properties to customize the summary item:

Property Description
AccordionControl.SummaryItemHeader Gets or sets the summary item's header.
AccordionControl.SummaryItemGlyph Gets or sets the summary item's glyph.
AccordionControl.SummaryItemPosition Gets or sets the summary item's position.

The following image shows a custom summary item:

The following code sample demonstrates how to customize the summary item as shown in the image above:

Expanded Accordion Items

You can show accordion items in a collapsed AccordionControl:


End-users can click the Summary Item to display all items in a popup window.

Set the AccordionItem.ShowInCollapsedMode property for the items you want to show:

You can customize the display mode of the items shown in the collapsed mode using the AccordionControl.CollapsedItemDisplayMode property.

The following example demonstrates how to show the collapsed AccordionControl with accordion items' glyphs:

Is this topic helpful?​​​​​​​