Many of our sites need to display news listings, which are made up of headings and text. General customers want to achieve this effect:
At the beginning, just display the title, and when you click on the title, then expand the text. Click again, and can shrink back.
This is a typical Ajax effect, or you could have done it in JavaScript before. My article describes the effect of using the ASP.net AJAX framework
1. The static approach
<%@ 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>
<title>untitled page</title>
<style type= "Text/css" >
. Header
{
Background-color:blue;
Color:red
}
</style>
<body>
<p>
This page demonstrates how to create a news list and supports expansion and collection. "Chen Xizhang" </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> This is the first news </b>
</Header>
<Content>
This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br R/> This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br/& Gt;<br/> This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br/><br
</Content>
</AJAX:AccordionPane>
<ajax:accordionpane id= "P2" runat= "Server" >
<Header>
<b> This is the second news </b>
</Header>
<Content>
This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br R/> This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br/& Gt;<br/> This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br/><br
</Content>
</AJAX:AccordionPane>
<ajax:accordionpane id= "P3" runat= "Server" >
<Header>
<b> This is the third news </b>
</Header>
<Content>
This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br R/> This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br/& Gt;<br/> This is the content of the news <br/><br/> This is the content of the news <br/><br/> This is the content of the news <br/><br
</Content>
</AJAX:AccordionPane>
</Panes>
</AJAX:Accordion></td>
</tr>
<tr>
<td> This is my text </td>
</tr>
</table>
</div>
</form>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
