AJAX Accordian Example

<ajaxToolkit:Accordion ID="acdContactInfo" runat="server" SelectedIndex="0" FadeTransitions="true"
TransitionDuration="300" HeaderCssClass="accordHeader" ContentCssClass="accordionContent"
HeaderSelectedCssClass="accordHeaderSelected">
<Panes>
<ajaxToolkit:AccordionPane ID="empfirstAdd" runat="server" Width="100%">
<Header>>
First Address </Header>
<Content>
<table>
<tr>
<td colspan="4" style="text-align: left; height: 22px;">
<strong><span style="color: #999999">Present Address Details</span></strong>
</td>
<td style="width: 137px; text-align: left; height: 22px;">
</td>
<td style="text-align: left; height: 22px; width: 10px;">
</td>
<td style="width: 10px; height: 22px; text-align: left">
</td>
<td style="width: 187px; text-align: left; height: 22px;">
</td>
</tr>
<tr>
<td style="width: 204px; text-align: right; vertical-align: middle;" valign="top">
<strong>Address</strong>
</td>
<td style="width: 3px" valign="top">
<span style="color: #ff3333">*</span>
</td>
<td style="width: 3px" valign="top">
:
</td>
<td rowspan="3" style="width: 133px; text-align: left" valign="top">
<asp:TextBox ID="txtFAddress" runat="server" Height="53px" MaxLength="200"
TextMode="MultiLine" Width="200px"></asp:TextBox>
</td>
<td style="width: 137px; text-align: right; vertical-align: middle; height: 19px;"
valign="to">
<strong>Country</strong>
</td>
<td style="width: 10px; text-align: center; vertical-align: middle;" valign="top">
<span style="color: #ff3333">*</span>
</td>
<td style="vertical-align: middle; width: 10px; text-align: center" valign="top">
:
</td>
<td style="width: 187px; text-align: left" valign="top">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlCountry" runat="server" AutoPostBack="True" DataTextField="CountryName"
DataValueField="CountryId" Height="20px" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged"
Width="144px">
<asp:ListItem Text="<Select Country>" Value="0"></asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td style="width: 204px; text-align: left" valign="top">
</td>
<td style="width: 3px" valign="top">
</td>
<td style="width: 3px" valign="top">
  
</td>
<td style="width: 137px; text-align: right; vertical-align: middle; height: 19px;"
valign="top">
<strong>State</strong>
</td>
<td style="width: 10px; text-align: center; vertical-align: middle;" valign="top">
<span style="color: #ff3333">*</span>
</td>
<td style="vertical-align: middle; width: 10px; text-align: center" valign="top">
:
</td>
<td style="width: 187px; text-align: left" valign="top">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlState" runat="server" AutoPostBack="True" DataTextField="StateName"
DataValueField="StateId" Height="20px" OnSelectedIndexChanged="ddlState_SelectedIndexChanged"
Width="144px">
<asp:ListItem Text="<Select State>" Value="0"></asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td style="width: 204px; text-align: left; height: 19px;" valign="top">
</td>
<td style="width: 3px; height: 19px;" valign="top">
</td>
<td style="width: 3px; height: 19px;" valign="top">
  
</td>
<td style="width: 137px; text-align: right; vertical-align: middle; height: 19px;"
valign="top">
<strong>City</strong>
</td>
<td style="width: 10px; text-align: center; vertical-align: middle; height: 19px;"
valign="top">
<span style="color: #ff3333">*</span>
</td>
<td style="vertical-align: middle; width: 10px; height: 19px; text-align: center"
valign="top">
:
</td>
<td style="width: 200px; text-align: left; height: 19px;" valign="top">
<asp:DropDownList ID="ddlCity" runat="server" DataTextField="CityName" DataValueField="CityId"
Height="20px" Width="150px">
</asp:DropDownList>
</td>
</tr>
</table>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccPaneEmpSecAdd" runat="server" Width="100%">
<Header>
Second Add</Header>
<Content>
<table>
<tr>
<td align="left" style="width: 204px; height: 16px; vertical-align: middle; text-align: right;">
<strong>Name</strong>
</td>
<td style="height: 16px; width: 2px;">
<span style="color: #ff3333">*</span>
</td>
<td style="width: 3px; height: 16px">
:
</td>
<td style="color: #000000; height: 24px" align="left">
<asp:TextBox ID="txtContName" runat="server" MaxLength="50" Width="188px"></asp:TextBox>
</td>
<td style="height: 19px; text-align: right; vertical-align: middle;">
<strong>Relation</strong>
</td>
<td style="width: 10px; height: 16px; text-align: left">
<span style="color: #ff3333">*</span>
</td>
<td style="width: 10px; height: 16px; text-align: left">
:
</td>
<td align="left" style="color: #000000; height: 24px">
<asp:DropDownList ID="ddlRelation" runat="server" Width="144px" DataTextField="Relation"
DataValueField="RelationId" Height="20px">
</asp:DropDownList>
</td>
<td style="width: 24px">
</td>
</tr>
</table>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

Thanks & Regards
Santosh