CollapsiblePanelExtender in one the several Extender controls in AJAX Control Toolkit that are very useful and demanded in ASP.NET websites. It is used to expand and collapse webpage contents and controls using Panel control. CollapsiblePanelExtender uses ASP.NET panel to expand and collapse webpage contents. It is a simple, easy and cool way to collapse and expand ASP.NET Panel control and contents in Panel control. A Label control or a LinkButton control can be used with Panel control for expanding and collapsing web pages contents and controls. We can expand contents on single click and in the same way we can collapse contents by clicking again. The good news is that collapsing and expanding will not do a server side post back and page will not be refreshed. The look and layout can be changed using CSS and we can also add images and text for expand or show contents and collapse or hide contents. We can also control expand and collapse behavior using code. Both client side JavaScript and Server side code is available to achieve this functionality.
Properties of CollapsiblePanelExtender
TargetControlID:
The ID of the Panel Control which we have to expand and collapse.
ExpandControlID:
The ID of the Control we need to click to expand our Panel control.
CollapseControlID:
The ID of the Control we need to click to collapse our Panel control. ExpandControlID and CollapseControlID can be same.
TextLabelID:
The ID of the Label to display any text for status of the Panel or to guide user.
ExpandedText:
Text to display on the label which will appear when the panel is in expanded state.
CollapsedText:
Text to display on the label which will appear when the panel is in collapsed state.
ImageControlID:
The ID of the Image control which will be used to show the expanded and collapsed status of the panel.
ExpandedImage:
Path of the image which will appear when panel is in expanded state.
CollapsedImage:
Path of the image which will appear when panel is in collapsed state.
Collapsed:
It specifies the initial collapsed or expanded state of the panel. If we set Collapsed to true then the panel will be at collapsed state initially.
- Open Visual Studio 2010
- File > New > Website
- Visual basic or Visual C# > ASP.NET Empty Web Site
- Website > Add New Item > Web Form
- Open Toolbox > Right Click > Add Tab
- Name the Tab As “AJAX Control Toolkit”
- Click on Tab > Choose Items
- Browse the “AjaxControlToolkit.dll” > Click Ok
- I have downloaded and extracted AJAX Control Toolkit in “Ajax” folder in “C” Drive so my path to the file is “C:\Ajax\ AjaxControlToolkit.dll”
- Open web form and add a ScriptManager control from “AJAX Extensions” tab.
ScriptManager control is necessary when you are using Ajax functionality in your application.
11.Add following CSS classes in style tag
.table1
{
background-color:Orange;
width:225px;
border-style:solid;
border-width:thin;
}
.table2
{
background-color:Lime;
width:225px;
border-style:solid;
border-width:thin;
}
.textbox
{
background-color:Silver;
border-style:solid;
border-width:thin;
}
.button
{
font-size:large;
background-color:Fuchsia;
border-style:solid;
border-width:thin;
}
12.Add following code in form tag
| Last Name |
|
| First Name |
|
| Age |
|
| Phone No. |
|
| City |
|
| Country |
|
|
|
You can see above, I have added two Panel controls. Panel1 will be use as expand and collapse control. You can see in CollapsePanelExtender control, I have mentioned ExpandControlID and CollapseControlID as Panel1. In Panel1, I have added a table and one row and two cells in the table. In second cell, I have added a Label control and an Image control. We will use these Label and Image controls to display the text and images for expand and collapse status.
Second Panel is our target control that will be used to expand and collapse the content in this panel. In second Panel, I have added a table and some TextBox controls and a button. I have also mentioned CSS classes for tables, TextBox and Button controls.
13.Now see the website in browser
