The Accordion Component in the AJAX Control Toolkit - The design view of the Accordion
(Page 4 of 5 )
The next picture shows the design view of the JAccordion.aspx page. The ScriptManager is the first item added. If you forget to add the ScriptManager and add the Accordion you will be presented with an error message.
The Source Code Listing
This is the complete listing of JAccordion.aspx page for the above design.
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="JAccordion.aspx.cs"
Inherits="Accordion_JAccordion" %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<ajaxToolkit:Accordion ID="Accordion1"
runat="server" ContentCssClass="accordionContent"
HeaderCssClass="accordionHeader"
TransitionDuration="200"
AutoSize="Fill"
FadeTransitions="true"
SelectedIndex="0" Height="300px" Width="500px"
BorderWidth="1px" BorderColor="DarkOrange">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1"
runat="server" BackColor="Aquamarine" >
<Header >Htek</Header>
<Content>A thing of beauty is a joy for ever </Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2"
runat="server" BackColor="AliceBlue" >
<Header>Hodentek</Header>
<Content><p><a href="http://hodentek.blogspot.com"> Jay's Hodentek Blog</a></p></Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3"
runat="server" BackColor="AntiqueWhite" >
<Header>ASP Free</Header>
<Content><asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</form>
</body>
</html>
Next: The page displayed on the browser >>
More JavaScript Articles
More By Jayaram Krishnaswamy
/ 12 
