# Accordion Page

## Content



Accordion is a panel with items organized as stacked pages called **Accordion Pages**. Each page in Accordion comprises a header and an expandable-collapsible content area. The page header contains a header text with expand/collapse icon and athe content area provides a placeholder to hold different controls. It has a user-friendly UI allowing you to easily expand or collapse the pages using the expand/collapse icon.

The following GIF shows an Accordion control with Accordion pages. You can observe how the page expands and displays the header and content area.

![WinForms Accordion Page](https://cdn.mescius.io/document-site-files/images/a9d1222b-0ddf-4c55-8888-49748b62a8c3/images/accordion-page.gif)

Accordion lets you add or remove pages in the pages collection at design time as well as runtime. To do so via the designer, you can use the **C1AccordionPage Collection Editor**. For more information, see [Design-Time Support](/componentone/docs/win/online-accordion/designtimesupport).

### Add Page

Let's say, you want to add a page to Accordion at runtime on a button click as showcased in the following image. You can do so by creating an instance of the [C1AccordionPage](/componentone/docs/win/online-accordion/) class, and adding the newly created AccordionPage into the Pages collection using the **Add** method.

![Add WinForms Accordion Page](https://cdn.mescius.io/document-site-files/images/a9d1222b-0ddf-4c55-8888-49748b62a8c3/images/add-page-by-button.png)

The following code snippet shows how to create and add a page named meetingsPage in Accordion on a button click event named AddPagebtn\_Click.

```csharp
private void AddPagebtn_Click(object sender, EventArgs e)
{
    if (meetingsPage is null)
    {
        //create a new AccordionPage
        meetingsPage = new C1AccordionPage();
        //set its HeaderText
        meetingsPage.HeaderText = "Meetings";
        //add the AccordionPage into the Pages collection of the Accordion
        c1Accordion1.Pages.Add(meetingsPage);
    }
}
```

Note that you can also add multiple WinForms controls to the Accordion page. For more information, see [Page Content Area](/componentone/docs/win/online-accordion/pagecontentarea).

### Remove Page

Let's say, you want to remove an existing page from Accordion at runtime on a button click as shown in the following image. You can do so by using the **Remove** method which removes a specific Accordion page from the Pages collection.

![Remove WinForms Accordion Page](https://cdn.mescius.io/document-site-files/images/a9d1222b-0ddf-4c55-8888-49748b62a8c3/images/remove-accordion-page-.gif)

The following code snippet shows how to remove a page from the Pages collection using the **Remove** method and setting the page to null on a button click.

```csharp
private void RemovePagebtn_Click(object sender, EventArgs e)
{
    if (meetingsPage is not null)
    {
        //remove the meetings page from the Pages Collection
        c1Accordion1.Pages.Remove(meetingsPage);
        //set the meetings page to null
        meetingsPage = null;
    }
}
```

### Reorder Pages

You can reorder pages in an Accordion, that is, move a page from one position to the other. Let's say, you want to move an existing page in the Accordion to a new position at runtime on a button click. You can do so by getting the current index of the page to be moved using the **IndexOf(T item)** method and then calling the **Move (int oldIndex, int newIndex)** method to reorder the position of the page from its old index to a new one.

The following image depicts the Accordion control with the Meetings page appearing at the first or top position from the bottom position.

![Reorder WinForms Accordion Page](https://cdn.mescius.io/document-site-files/images/a9d1222b-0ddf-4c55-8888-49748b62a8c3/images/reorder-meetingpage.gif)

The following code snippet demonstrates how to move a page using the **Move** method.

```csharp
private void ReorderPagebtn_Click(object sender, EventArgs e)
{
    if (meetingsPage is not null)
    {
        //get the current index of the page
        var currentIndex = c1Accordion1.Pages.IndexOf(meetingsPage);
        //move the page from currentIndex to first position (0 index)
        c1Accordion1.Pages.Move(currentIndex, 0);
    }
}
```

### Set Active Page

Accordion lets you indicate that a particular page in the control is active or currently selected using the [ActivePage](/componentone/docs/win/online-accordion/) property of [C1Accordion](/componentone/docs/win/online-accordion/) class.

![Set Active WinForms Accordion Page](https://cdn.mescius.io/document-site-files/images/a9d1222b-0ddf-4c55-8888-49748b62a8c3/images/active-accordion-page.png)

To set an active page, you can use **ActivePage** property of the **C1Accordion** class and assign the specific Accordion page name to it.

The following code snippet shows how to set an active page and see an expanded view of that page.

```csharp
private void SetActivePagebtn_Click(object sender, EventArgs e)
{
    if (meetingsPage is not null)
    {
        //set the Meeting's page as ActivePage
        c1Accordion1.ActivePage = meetingsPage;
        //set the IsExpanded property to expand the page
        c1Accordion1.ActivePage.IsExpanded = true;
    }
}
```