Expanding and Collapsing

  • 2 minutes to read

You can expand and collapse accordion items that contain nested items. The following image shows an expandable accordion item:

AccordionExpanding

This topic contains the following sections:

Expanding and Collapsing in Code

Use the following methods to expand or collapse accordion items in code:

Method Description
AccordionControl.ExpandItem Expands an accordion item.
AccordionControl.ExpandAll Expands all accordion items that can be expanded.
AccordionControl.CollapseItem Collapses an accordion item.
AccordionControl.CollapseAll Collapses all accordion items that can be collapsed.

Expanding and Collapsing at Runtime

To expand or collapse accordion item at runtime:

AccordionExpandingRuntime

You can set the AccordionControl.ExpandItemOnHeaderClick property to false to prohibit expanding when clicking an item.

Expand-Collapse Button Position

Use the following properties to hide the expand-collapse button or change its position:

Property Description
AccordionItem.ExpandButtonPosition Specifies the expand-collapse button's position for the current accordion item.
AccordionControl.RootItemExpandButtonPosition Specifies the expand-collapse button's position for all root items.
AccordionControl.SubItemExpandButtonPosition Specifies the expand-collapse button's position for all subitems.

The code sample below demonstrates how to show the expand-collapse button at root items' left side:

<dxa:AccordionControl RootItemExpandButtonPosition="Left"> ... </dxa:AccordionControl>

The image below shows the result:

AccordionExpandingButtonPosition

Expanding Modes

The AccordionControl supports different expanding modes. Use the AccordionControl.ExpandMode property to specify the mode:

Mode Description
ExpandMode.Multiple End-users can expand multiple items. At least one item is always expanded.
ExpandMode.MultipleOrNone End-users can expand multiple items. Collapsing all items is also possible.
ExpandMode.Single One accordion item is always expanded. End-users cannot collapse the expanded item.
ExpandMode.SingleOrNone End-users can expand one accordion item at a time. Collapsing all items is also possible.

The following code sample demonstrates the AccordionControl in Single expanding mode:

<dxa:AccordionControl ExpandMode="Single"> ... </dxa:AccordionControl>

The image below shows the result:

AccordionExpandingModes

Expanding and Collapsing Animation

The AccordionControl applies an animation when expanding or collapsing accordion items, by default. You can disable the animation by: