Follow the easy steps below to create your solution.

1.    Start your Visual Studio 2005 IDE.

2.    Choose Create Web Site from the menu.

3.    In this sample application we will use the Visual Basic language for the sample application.

4.    Name the solution CollapsiblePanelSample.

5.    Choose ASP.NET AJAX Control Toolkit Web Site.

6.    Choose File System in the location box.

7.    Click ok to create the project.

8.    Visual Studio will create your project with a Default.aspx page and most likely a readme.txt. Go ahead and get rid of the latter file.

9.    Open Default.aspx page in design view.

10. You noticed that there is a control on the page already called script manager. (Well, AJAX is really a script based implementation of the language JavaScript). In short, ScriptManager Control manages client script for Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls.

11. Now you have to fill your page with some text. In order to do so, take Listing 1 and copy and paste it many times inside the div tag within the default.aspx page when in source mode.

12. Create a new item in the solution of type Style Sheet and leave the default name.

13. Listing 1 contains the style sheet content that should be placed inside the file. You can copy and paste directly.

Listing 1- Style Sheet Content for our example

.collapsePanel {
      width: 640px;
      height:0px;
      background-color:white;
      overflow:hidden;
}
 
.collapsePanelHeader{   
      width:640px;            
      height:20px;
      color: Yellow;
      background-color: Black;
      font-weight:bold;
      float:none;
      padding:5px; 
      cursor: pointer; 
      vertical-align: middle;
}

14. Go to the source mode, and click and drop the style sheet file into the header section of the default web form in order to be able to reference it.

15. Now, drag two panels from the standard toolbox and drop them on the page.

16. Name the first panel PnlTitle and delete the height and width specs then create a CssClass tag with value collapsePanelHeader like in listing 2.

Listing 2- Title Panel and Content Panel Format

<asp:Panel ID="PnlTitle" runat="server" CssClass="collapsePanelHeader">
<asp:Panel ID="PnlContent" runat="server" CssClass="collapsePanel">

17. Name the second panel PnlContent and delete the height and width specs then create a CssClass tag with value collapsePanel like in the above listing.

18. In the title panel add an asp image standard control (it is necessary to use the image asp control in order to be able to control it afterwards). Make the image url point to an image that you create with a down arrow (call the image collapse_blue.jpg to be able to use it later). Also, create another image with an up arrow (call the image expand_blue.jpg to be able to use it later).

19. After the image control, add a text in bold that says: Who Am I?

20. Now drag a label and make the text tag Show Details (…)

21. Please fill the content panel with some information about yourself in any html format.

22. Place the cursor after the script manager html end tag. From the Toolbox drag a Collapsible Panel control and set the properties as specified in Listing 3.

Listing 3- Collapsible Panel Extender specs

<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" 
    runat="server" TargetControlID="PnlContent" ExpandControlID="PnlTitle" 
    CollapseControlID="PnlTitle" TextLabelID="Label1" 
    CollapsedText="Show Details (...)" ExpandedText="Hide Details (...)" 
    ImageControlID="Image1" ExpandedImage="images/collapse_blue.jpg" 
    CollapsedImage="images/expand_blue.jpg"
    Collapsed="True" SuppressPostBack="true">
</ajaxToolkit:CollapsiblePanelExtender>

23. Please note that some of these properties cannot be specified using the normal properties window. The target control ID specifies the control to collapse and extend (the content panel in our case).

24. The Expand Control ID specifies the control that is going to control the expansion (the title panel in our case).

25. The Collapse Control ID specifies the control that is going to collapse the panel (the title panel in our case).

26. Please note that you can specify two different controls to collapse and expand.

27. The Text Label ID specifies that label that is going change its text caption when the user collapses or expands the panel.

28. The same description applies the Image Control ID, but the image is going to change.

29. The Collapsed Text tag specifies the text that should appear when the panel is collapsed.

30. The Expanded Text tag specifies the text that should appear when the panel is extended.

31. The Expanded Image tag specifies the image to display when the panel is expanded.

32. The Collapsed Image tag specifies the image to display when the panel is collapsed.

33. The Collapsed tag specifies the state of the content panel when the page loads.

34. The Suppress Post Back tag specifies that when expanding the panel, there should be no posting to the server or not. In our case and since our content is fixed and not changing, we did set this property to true.