Hi

I have added some Ajax technology to my site. The left bar is having quite a few panels so I decided to make those panel Collapsible. Having worked with ATLAS before I knew how easy it would be to do this work.

All I had to do was add the CollapsiblePanelExtender to these panels. This extender targets any ASP.NET Panel control. The panel is also post-back aware so in case of post back the panel remembers it state

I had to configure the CollapsiblePanelExtender to show correct text and panel. And last but not the least put the scriptmanager in the master page itself so that it is available to all the pages which are using the master pages (All my pages use this master page so I do not have to add this script in all pages). That was all I needed to do to change the panels to act like Collapsible Panel. Below is the description of the use of collapsible panel.

For using collapsible panel just drag the panel in the Form. If you don’t know how to put atlas control see this post

<atlasToolkit:CollapsiblePanelExtender ID="colpanel" runat="server">

</atlasToolkit:CollapsiblePanelExtender>

Now you need to add a CollapsiblePanelProperties template in the CollapsiblePanelExtender.

<atlasToolkit:CollapsiblePanelProperties
      CollapseControlID="Panel1"
      Collapsed="false"
      TextLabelID="Label1"
      CollapsedText="+ RSS and ATOM"
      ExpandedText="- RSS and ATOM"
      ExpandControlID="Panel1"
      ScrollContents="True"
      TargetControlID="Panel2" />

• Here CollapseControlID and ExpandControlID are the controls (panel) that will expand or collapse the panel on a click, respectively. If these values are the same, the panel will automatically toggle its state on each click.

• Collapsed specifies weather the panel will be initially collapsed or expanded.
• TextLabelID is the ID of the label control where the status text for the panel will be displayed.
• CollapsedText and ExpandedText is the text to be displayed in the textLabelID when the panel is collapsed or expanded respectively.
• TargetControlID is the control (Panel) that will be expanded or collapsed on the click
• ScrollContents takes a Boolean property on whether to add scrollbar in case the content is larger than the panel itself.

There are many other property available like CollapsedSize, ExpandedSize, CollapsedImage, ExpandedImage, ExpandDirection etc which can be used to customize the panel.

The full tag for using collapsible panel in the Site is.
[NOTE:You can add more than one properties in the extender.]

<atlasToolkit:CollapsiblePanelExtender ID="colpanel" runat="server">

<atlasToolkit:CollapsiblePanelProperties
      CollapseControlID="Panel1"
      Collapsed="false"
      TextLabelID="Label1"
      CollapsedText="+ RSS and ATOM"
      ExpandedText="- RSS and ATOM"
      ExpandControlID="Panel1"
      ScrollContents="True"
      TargetControlID="Panel2" />

Hope this helps
Thanks
Vikram