Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. With AJAX help we can develop a web application and retrieve small amounts of data from the web server. AJAX consists of a different type of technology.

• JavaScript
• XML
• Asynchronous Call to the server

Accordion Control

An Accordion control is used to create expandable & collapsible navigation bars or to display page contents which the user can expand and collapse to view one pane at a time. The Accordion control contains multiple panes and display them one at a time. It is the same as the Collapsible panel control where only one can be expanded at a time. The Accordion control contains multiple Accoridionpane controls. Each AccordionPane control has a template for its header and its content. The selected pane is automatically persisted across postbacks.

Property

• HeaderCSSClass
• ContentCssClass
• HeaderSelectedCssClass
• FadeTransiation

Step 1 : Open Visual Studio 2010

• Go to File->New->WebSite
• Select ASP.NET Empty WebSite

Step 2 : Go to Solution Explorer and right-click.

• Select Add->New Item
• Select WebForm
• Default.aspx page open

Step 3 : Go to Default.aspx page and click on the [Design] option and drag control from Toolbox.

• Drag ScriptManager control, RadioButtonList

Step 4 : Now go to Toolbox option and drag AccordionPane Control from AJAXToolkit.

Step 5 : Go to Default.aspx [Source] option and define several List Item inside the RadioButton Control with AccordianPane control.

Code

<asp:AccordionPane ID="AccordionPane1" runat="server">
<Header>Name</Header>
<Content>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem>raj</asp:ListItem>
<asp:ListItem>amit</asp:ListItem>
<asp:ListItem>bhavana</asp:ListItem>
<asp:ListItem>manish</asp:ListItem>
</asp:RadioButtonList>
</Content>
</asp:AccordionPane>

Step 6 : We will define CSS for the Password Strength.

Code

<style type="text/css">
.Header
{
background-color: White;
color: Teal;
padding: 4px;
font-weight: bold;
}
.SelectedHeader
{
background-color: Black;
color: Gray;
padding: 4px;
font-weight: bold;
}
.Contents
{
background-color: Gray;
padding: 5px;
}
</style>

Step 7 : Go to Toolbox option and drag Accordion control.

Step 8 : Go to Default.aspx[Source] page option and define all Accordion property.

Code

<asp:Accordion ID="Accordion1" runat="server" HeaderCssClass="Header" ContentCssClass="Contents" HeaderSelectedCssClass="SelectedHeader" Font-Names="Verdana" Font-Size="10" BorderColor="#000000" BorderStyle="Solid" BorderWidth="1" FramesPerSecond="100"
FadeTransitions="true" TransitionDuration="500">

Step 9 : Go to Default.aspx. page and write a code.