Accessing Collapsible Panels With CheckBox Controls
Sign in

Accessing Collapsible Panels with CheckBox controls

Just open MS Visual Studio 2008 
open a new asp.net vb project name it Offer Form
create a new webform named WebForm1.aspx
copy n paste the below code in WebForm1.aspx
Debug now n get the o/p
Cool

<%@
Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="Offer_Form.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<tr>
<td style ="width:30%"></td>
<td>
<asp:CheckBox ID = "CheckBox1" runat ="server" TabIndex ="12" AutoPostBack = "false" Text ="Check/Balance Transfer" />
<asp:CheckBox ID = "CheckBox2" runat ="server" TabIndex ="12" AutoPostBack = "false" Text ="RateSale" />
</td>
</tr>
<asp:CollapsiblePanelExtender
ID="CollapsiblePanelExtender1"
runat="server"
TargetControlID ="Panel3"
CollapsedSize ="0"
Collapsed ="true"
CollapseControlID ="CheckBox1"
ExpandControlID ="CheckBox1">
</asp:CollapsiblePanelExtender>
<asp:CollapsiblePanelExtender
ID="CollapsiblePanelExtender2"
runat="server"
TargetControlID ="Panel4"
CollapsedSize ="0"
Collapsed ="true"
CollapseControlID ="CheckBox2"
ExpandControlID ="CheckBox2">
</asp:CollapsiblePanelExtender>
<tr>
<td colspan ="2">
<asp:Panel ID="Panel3" runat="server" Height="0px" style="overflow:hidden;">
<asp:Accordion ID="Accordion1" runat="server"
SelectedIndex="0"
AutoSize="None"
FadeTransitions="true"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true"
>
<Panes>
<asp:AccordionPane runat="server" ID="AccordionPane1" Height="0px">
<Header>Define Check/Balence Transfer


<asp:ImageButton runat="server" ID="ImageButton1" ImageUrl="~/images/plus.png" Width="12px" Height="12px"/></Header>
<Content>
<asp:Panel ID ="Panel1" runat ="server" width ="600px" >
<table cellspacing="2" cellpadding="2" width="100%" border="5">
</td>
</tr>
<tr>
<td colspan="1"><span>
<asp:Label id="Label7" runat="server">Define Check/Balance Transfer</asp:Label></span></td> </tr>
</td>
</tr>
<tr>
<td style="width:30%">
<div style ="text-align:left">Pricing Type</div>
</td>
<td>
<asp:DropDownList id="DropDownList1" runat="server" Width="280px" tabIndex="19">
<asp:ListItem Value="1">Champion1</asp:ListItem>
<asp:ListItem Value="2">Champion2</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</asp:Panel>

</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</asp:Panel>

<asp:Panel ID="Panel4" runat="server" Height="0px" style="overflow:hidden;">
<asp:Accordion ID="Accordion2" runat="server"
SelectedIndex="0"
AutoSize="None"
FadeTransitions="true"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true"
>
<Panes>
<asp:AccordionPane ID="AccordionPane2" runat="server" Height="0px">
<Header>Base Sale Promo Offer Description</Header>
<Content>
<asp:Panel ID ="Panel2" runat ="server" width ="600px" >
<table cellspacing="2" cellpadding="2" width="100%" border="5">
</td>
</tr>
<tr>
<td colspan="1"><span>
<asp:Label id="Label8" runat="server">Define RateSale</asp:Label></span></td> </tr>
</td>
</tr>
<tr>
<td style="width:100%">
<div style ="text-align:left">Base Sale Promo Offer Description </div>
<asp:TextBox ID="TextBox1" Width="100%" Text="enter text here" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</asp:Panel>
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</asp:Panel>





</div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
</form>
</body>
</html>



Regards
N Pavan Kumar Rao
start_blog_img