ASP.NET (snapshot 2017) Microsoft documentation and samples

Collapsing and Expanding a Panel from JavaScript (C#)

The CollapsiblePanel control in the ASP.NET AJAX Control Toolkit extends a panel and provides it with the capability to collapse its contents and expand it again. These two actions can also be triggered from custom JavaScript code.

Overview

The CollapsiblePanel control in the ASP.NET AJAX Control Toolkit extends a panel and provides it with the capability to collapse its contents and expand it again. These two actions can also be triggered from custom JavaScript code.

Steps

First of all, create a new ASP.NET page and include the ScriptManager within the one <form> element. This loads the ASP.NET AJAX library which is required by the Control Toolkit:

[!code-aspxMain]

   1:  <asp:ScriptManager ID="asm" runat="server" />

Then, create a panel with some text so that the collapse/expand effect can be seen:

[!code-aspxMain]

   1:  <asp:Panel ID="Panel1" CssClass="panelClass" runat="server">

   2:   ASP.NET AJAX is a free framework for quickly creating a new generation of more

   3:   efficient, more interactive and highly-personalized Web experiences that work

   4:   across all the most popular browsers.<br />

   5:   ASP.NET AJAX is a free framework for quickly creating a new generation of more

   6:   efficient, more interactive and highly-personalized Web experiences that work

   7:   across all the most popular browsers.<br />

   8:   ASP.NET AJAX is a free framework for quickly creating a new generation of more

   9:   efficient, more interactive and highly-personalized Web experiences that work

  10:   across all the most popular browsers.<br />

  11:  </asp:Panel>

As you can see, the panel references a CSS class which is shown here (and basically defines a background color and the panel’s width):

[!code-cssMain]

   1:  <style type="text/css">

   2:   .panelClass {background-color: lime; width: 300px;}

   3:  </style>

The CollapsiblePanelExtender control requires the TargetControlID attribute so that the toolkit knows which panel to collapse or expand upon request:

[!code-aspxMain]

   1:  <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"

   2:   TargetControlID="Panel1" />

Unfortunately, the extender currently does not expose a specific API for collapsing or expanding the panel, but some undocumented methods will do. First of all, add three HTML buttons to the page which will then trigger the client-side JavaScript to collapse or expand the panel’s contents:

[!code-aspxMain]

   1:  <input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />

   2:  <input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />

   3:  <input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />

In the client-side JavaScript code (started with <script type="text/javascript">), the $find() method needs to be used to access the CollapsiblePanelExtender. $find("cpe") will return a reference to it. From there on, specific methods will solve the task at hand.

The method for opening (expanding) the panel is called _doOpen(); the following code implements the doOpen() function called when the first button is clicked:

[!code-javascriptMain]

   1:  function doOpen()

   2:  {

   3:   $find("cpe")._doOpen();

   4:  }

For closing, or collapsing the panel, the _doClose() method needs to be executed. So when the user clicks on the second button, the following JavaScript code is called:

[!code-javascriptMain]

   1:  function doClose()

   2:  {

   3:   $find("cpe")._doClose();

   4:  }

The third button toggles the state of the panel: from collapsed to expanded, and vice versa. The CollapsiblePanelExtender exposes the toggle() method which does exactly that: reverses the state of the panel. However there is also another approach (which is internally used by the toggle() method): The get_Collapsed() method of the CollapsiblePanelExtender() tells us whether the panel is collapsed or not. Depending on the return value of this function, the panel is then either expanded (_doOpen() method) or collapsed (_doClose()) method:

[!code-javascriptMain]