# SideButton

A retractable animated button that can be used to expand or collapse other panels.

The side button is a useful control that is also quite common in modern web applications. It adds a small button elastic button to a container. It can be docked to the left or the right and expand in the opposite direction (similar to the GMail options vertical bar).

![](https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFp7MR1wemvcC5891_r%2F-MiYhq3E3wkP0-NXPMD5%2F-MiYiTFXS1cuzSi_Xk1W%2Fimage.png?alt=media\&token=d8bf172d-a5d0-47eb-8a05-9c797462af0b)

{% embed url="<https://github.com/iceteagroup/wisej-extensions/tree/master/Wisej.Web.Ext.SideButton>" %}
SideButton Source Code
{% endembed %}

## Code Example

```csharp
public partial class Page1 : Page
{
    public SideButton sideButton1;
    public Panel panel1;
    public Page1()
    {
        InitializeComponent();

        sideButton1 = new SideButton();
        sideButton1.Size = new System.Drawing.Size(40, 40);
        sideButton1.BackColor = System.Drawing.Color.White;

        panel1 = new Panel();
        panel1.BackColor = System.Drawing.Color.Blue;
        panel1.Controls.Add(sideButton1);
        panel1.Dock = Wisej.Web.DockStyle.Right;
        panel1.Size = new System.Drawing.Size(150, 400);
        this.Controls.Add(panel1);

        sideButton1.Click += new System.EventHandler(sideButton1_Click);
    }
        private void sideButton1_Click(object sender, EventArgs e)
    {
        var collapsed = !sideButton1.Collapsed;
        sideButton1.Collapsed = collapsed;
        panel1.Width = collapsed ? 50 : 150;
    }
}
```

This code snippet creates a SideButton and a Panel. The SideButton is a child of the Panel. The Click Event of the SideButton is attached to and the Collapsed property of the sidebutton is toggled when clicked. Note that this line of code: `panel1.Width = collapsed ? 50 : 150;` changes the width of the panel based on the collapsed property of the SideButton. See below for what happens when the SideButton is clicked.

<figure><img src="https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MFp7MR1wemvcC5891_r%2Fuploads%2Feqeq4YkX1bOIS6SpAKJi%2Fchrome_YYj1psdWTh.gif?alt=media&#x26;token=24291cfe-7d75-485a-a317-dd5454518dc2" alt=""><figcaption></figcaption></figure>

## How to Use

The **SideButton** extension can be added to a Wisej.NET project using NuGet Package Manager.

{% embed url="<https://www.nuget.org/packages/Wisej-3-Sidebutton>" %}

It has a collapsed property that is used in the [NavigationBar sample](https://app.gitbook.com/@iceteagroup/s/examples/tutorials/navigationbar) to show/hide a [FlexLayoutPanel](https://docs.wisej.com/api/wisej.web/containers/flexlayoutpanel). This FlexLayout can contain any kind of elements, in this sample it just hosts 2 picture boxes. We also dropped 2 animation extenders on the page so we are able to define sliding effects when the panel is shown/hidden:

![](https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFp7MR1wemvcC5891_r%2F-MirJY776bd0YhupXdFT%2F-Mirdg1XRF1Fu5j7eQI9%2Fimage.png?alt=media\&token=75ae92b1-f178-4216-99e0-4986bfeb9d1f)