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.

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.

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 class, and adding the newly created AccordionPage into the Pages collection using the Add method.

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

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.

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.

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.

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.

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

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 property of C1Accordion class.

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.

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;
    }
}