# Changing the Expand Direction

## Content

By default, the [C1Accordion](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1Accordion.html) control's accordion panes expand from top-to-bottom because the [C1Accordion.ExpandDirection](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1Accordion.ExpandDirection.html) property is set to **Down**. You can easily change the expand direction by setting the **ExpandDirection** property to **Up**, **Right**, or **Left** in Design view, in XAML, or in code.

This topic assumes that you have added a **C1Accordion** control with at least one **C1AccordionItem** to your project.

**At Design Time in Design view**

To set the **ExpandDirection** property in Design view, complete the following steps:

1. Click the **C1Accordion** control once to select it.
2. In the **Properties** window, click the **ExpandDirection** drop-down arrow and select one of the options from the list. For this example, select **Right**.

**In XAML**

To set the **ExpandDirection** property to **Right** in XAML, add **ExpandDirection="Right"** to the `<c1ext:C1Accordion>`tag so that it appears similar to the following:

```xaml
<c1ext:C1Accordion Name="C1Accordion1" ExpandDirection=Right Width="150" Height="55">
```

**In Code**

To set the **ExpandDirection** property in code, complete the following steps:

1. Enter Code view and add the following code beneath the InitializeComponent() method:

```vbnet
C1Accordion1.ExpandDirection = C1.WPF.Extended.ExpandDirection.Right
```

```csharp
c1Accordion1.ExpandDirection = C1.WPF.Extended.ExpandDirection.Right;
```

2. Run the program.

**This Topic Illustrates the Following**:

By following the instructions in this topic, you have learned how to set the **ExpandDirection** property. In this topic, you set the **ExpandDirection** property to **Right**, which will make the **ExpandDirection** control resemble the following:

![](https://cdn.mescius.io/document-site-files/images/babf1807-69aa-4d8a-96b6-d6c6d9325368/changing_x0020_the_x0020_expand_x0020_direction_files/image001.png)