我们很多站点上面都需要显示新闻列表，由标题和正文组成的。一般客户都 希望实现这样的效果：
开始的时候只是显示标题，当点击标题的时候， 再展开正文。再点击，又可缩回去。
这是典型的AJAX效果，或者说以前 你也可以通过javascript来实现。我这篇文章中介绍一下使用ASP.NET AJAX框架 来实现的效果
1. 静态的做法
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="NewPanelSample._Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="AJAX" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd%22>
<html xmlns="http://www.w3.org/1999/xhtml%22 >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.Header
{
background-color:Blue;
color:Red
}
</style>
</head>
<body>
<p>
这个页面演示了如何创建一个新闻列表，并 且支持展开和收起。【陈希章】 <hr />
</p>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<table>
<tr>
<td>
<AJAX:Accordion ID="Accordion1" runat="server"
AutoSize="None" SelectedIndex="-1"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true" HeaderCssClass="Header"
Width="799px"
>
<Panes>
<AJAX:AccordionPane ID="p1" runat="server">
<Header>
<b>这是第一个新闻</b>
</Header>
<Content>
这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新 闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容 <br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br />
</Content>
</AJAX:AccordionPane>
<AJAX:AccordionPane ID="p2" runat="server">
<Header>
<b>这是第二个新闻</b>
</Header>
<Content>
这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新 闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容 <br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br />
</Content>
</AJAX:AccordionPane>
<AJAX:AccordionPane ID="p3" runat="server">
<Header>
<b>这是第三个新闻</b>
</Header>
<Content>
这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新 闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容 <br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br /> 这是新闻的内容<br /><br />
</Content>
</AJAX:AccordionPane>
</Panes>
</AJAX:Accordion></td>
</tr>
<tr>
<td>这是我的文 本</td>
</tr>
</table>
</div>
</form>
</body>
</html>