How to use AjaxControlToolkit’s CollapsiblePanelExtender Control

Now a days , web development is no more boring and tough(at least creating good UI web pages) . AjaxControlToolkit is  new sensation in the web development . 

In this post and some upcoming posts ill be sharing  “HOW TO ”  explaination of these controls  available in AjaxControlToolkit.

Todays we will  discuss how to use   “CollapsiblePanelExtender” of AjaxControlToolkit.


(1) Add AjaxControlToolkit.dll to your toolbox so that you can access all the controls of it .

(2) Now create a new web project in your VS . 

(3) Add a Panel control on the page and add your contents in to it . Set its ID =Panel1

(4) Add  CollapsiblePanelExtender  control from AjaxControlToolkit toolboxlist which we just added in step 1.


  <cc1:CollapsiblePanelExtender ID=”Panel3_CollapsiblePanelExtender” 
                runat=”server” Enabled=”True” TargetControlID=”Panel3″ AutoExpand=”false”  CollapseControlID=”hl” ExpandControlID=”hl”  CollapsedText=”Expand” ExpandedText=”Collapse” AutoCollapse=”true”>

  <cc1:CollapsiblePanelExtender ID=”CollapsiblePanelExtenderanel1″      runat=”server” Enabled=”True” TargetControlID=”Panel1″ AutoExpand=”false”  CollapseControlID=”hl” ExpandControlID=”hl”  >            </cc1:CollapsiblePanelExtender>



(5)  Create a hyper link or any button or any  control from tool box , which you want to use to collapse and Expand the panel . I am using here a Hyperlink control .

 <asp:HyperLink ID=”hl” runat=”server” Text=”Cpllapse”></asp:HyperLink>

(6 ) Now press F5  and clcik on the Hyperlink on hte page .  It will expand the panel and clicking again  on it will collapse it . 

Note : Adding Script Manager control is mandatory to use  this toolkit’s control

thus we  can place many panels on our page and add CollapsiblePanelExtender  control to them . 

Enjoy 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s