使用CollapsiblePanelExtender实现展开和收缩效果

一般网页上的展开和收缩效果都要用到js代码，实现起来比较麻烦，现在有一种方法不用写一句js代码，就能实现绚丽的展开和收缩效果。那就是使用CollapsiblePanelExtender控件，该空间属于微软的atlas，下载地址

http://atlas.asp.net/default.aspx?tabid=47&subtabid=471

首先要在页面上至少添加两个panel，第一个panel用来放标题，第二个panel用来放内容，当鼠标点击第一个panel时，就能控制第一个panel的展开和收缩，最基本的代码如下：

        <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server">
            <cc1:CollapsiblePanelProperties
            CollapseControlID="Panel1"
            ExpandControlID="Panel1"
            TargetControlID="Panel2" /> 
        </cc1:CollapsiblePanelExtender>

属性TargetControlID指的被控制的panel，这里为panel2

属性ExpandControlID指的是控制展开的panel，这里为panel1，就是说点击panel1时会展开panel2

属性CollapseControlID指的时控制收缩的panel，这里是panel1。

这三个是最基本也是最常用的属性，还有很多其它属性，灵活使用这些属性可实现很多很炫的功能，下面就简单介绍一下其它属性。

TargetControlID：被控制的panel

CollapsedSize：目标收缩后的大小

ExpandedSize：目标展开后的大小

Collapsed：true时为展开，false时为收缩

Scroll Contents:值为true时，且目标panel的大小小于内容的大小时自动添加滚动条。

ExpandControlID/CollapseControlID：点击这些控件会展开或收缩目标panel。

TextLabelID：指示一个label控件的ID，该label的值会根据目标panel的状态而改变。

CollapsedText：设置当目标panel为收缩时TextLabelID所指示的lable的值。

ExpandedText：设置当目标panel为展开时TextLabelID所指示的lable的值。

ImageControlID：指示一个image控件。该控件会根据目标panel状态的不同而改变图片。

CollapsedImage：指示目标panel为收缩时ImageControlID所指示的image的path。

ExpandedImage：指示目标panel为展开时ImageControlID所指示的image的path。

ExpandDirection：指示目标panel的展开收缩方向，可以是水平或垂直展开收缩。