# Expand Direction

Accordion allows users to set the direction in which the accordion pane would expand to display the items. See more demos, documentation, and samples here.

## Content

In Accordion control, users can set the direction in which the accordion pane would expand to display the items. By default the Accordion expands in downward direction and the control expands from top to bottom. The **C1Accordion** class provides the **ExpandDirection** property for this purpose. The ExpandDirection enumeration lets the user expand the Accordion in four directions: Left, Right, Up or Down direction. This feature lets the user fit the accordion control into a variety of application UIs.

| **Expanding Direction** | **Snapshot** |
| ------------------- | -------- |
| Expand Down (default) | ![Expand Down](https://cdn.mescius.io/document-site-files/images/530ec557-536d-4b6e-94ca-c0cf743e2c3a/images/accordion-down-expand.png) |
| Expand Up | ![Expand Up](https://cdn.mescius.io/document-site-files/images/530ec557-536d-4b6e-94ca-c0cf743e2c3a/images/accordion-expand-up.png) |
| Expand Right | ![Expand Right](https://cdn.mescius.io/document-site-files/images/530ec557-536d-4b6e-94ca-c0cf743e2c3a/images/accordion-right-expand.png) |
| Expand Left | ![Expand Left](https://cdn.mescius.io/document-site-files/images/530ec557-536d-4b6e-94ca-c0cf743e2c3a/images/accordion-left-expand.png) |

The code snippet below illustrates how to set the direction for expansion in Accordion for WPF control as 'right':

```xml
<c1:C1Accordion x:Name="accordion" ExpandDirection="Right" Width="300" Margin="25">
</c1:C1Accordion>
```

```csharp
accordion.ExpandDirection = C1.WPF.Accordion.ExpandDirection.Right;
```