Properties of CollapsiblePanelExtender
The ID of the Panel Control which we have to expand and collapse.
The ID of the Control we need to click to expand our Panel control.
The ID of the Control we need to click to collapse our Panel control. ExpandControlID and CollapseControlID can be same.
The ID of the Label to display any text for status of the Panel or to guide user.
Text to display on the label which will appear when the panel is in expanded state.
Text to display on the label which will appear when the panel is in collapsed state.
The ID of the Image control which will be used to show the expanded and collapsed status of the panel.
Path of the image which will appear when panel is in expanded state.
Path of the image which will appear when panel is in collapsed state.
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
12.Add following code in form tag
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