Brian
asked on
Show/Hide Panels using Javascript/jQuery
Hello Experts,
I have the following HTML Markup below. I need to always display Panel1 when the Page first Loads but if a user needs to enter values for Panel2 then they must select the Home Address RadioButton which will then need to hide Panel1 and shoe Panel2. Is this possible? If so, I need help writing the Javascript code or a tutorial link would even help.
I have the following HTML Markup below. I need to always display Panel1 when the Page first Loads but if a user needs to enter values for Panel2 then they must select the Home Address RadioButton which will then need to hide Panel1 and shoe Panel2. Is this possible? If so, I need help writing the Javascript code or a tutorial link would even help.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.5.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" onclick="ShowHide(this)" RepeatDirection="Horizontal">
<asp:ListItem Value="0">Work Address</asp:ListItem>
<asp:ListItem Value="1">Home Address</asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="lblWorkBldg" runat="server" Text="Work Bldg"></asp:Label>
<br />
<asp:TextBox ID="txtWorkBldg" runat="server"></asp:TextBox>
<br />
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<asp:Label ID="lblHome" runat="server" Text="Home Address"></asp:Label>
<br />
<asp:TextBox ID="txtHomeAddress" runat="server"></asp:TextBox>
<br />
</asp:Panel>
</div>
</form>
</body>
</html>
ASKER
No flash is required for this. Why do you say I need flash plugin?
>Why do you say I need flash plugin?
Where did I mention that?
Where did I mention that?
ASKER
Your second post.
it's a screencast showing you the test page running...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@sonawanekiran,
For some reason when I run your code it defaults to Panel1, I would prefer to have user make that decision. Also, if I select RadioButton with Values 1 or 0 then the contents of Panel1 and Panel2 flicker and do not stay put.
For some reason when I run your code it defaults to Panel1, I would prefer to have user make that decision. Also, if I select RadioButton with Values 1 or 0 then the contents of Panel1 and Panel2 flicker and do not stay put.
ASKER
@sonawanekiran,
I apologize and I stand corrected. Your code works FINE!!! I had AutoPostBack="true" because I was playing around with the same using but using Server Side Code to do this and forgot to remove that.
Speaking of Server Side Code and Client Side Code which method would be best to use and why? I worry about users having Javascript disabled. But I'm not sure what could happen if I choose Server Side Code. I know it's a hit back to the server but what can make the Server Side Code fail as compared to having Javascript disabled and user cannot make any change.
I apologize and I stand corrected. Your code works FINE!!! I had AutoPostBack="true" because I was playing around with the same using but using Server Side Code to do this and forgot to remove that.
Speaking of Server Side Code and Client Side Code which method would be best to use and why? I worry about users having Javascript disabled. But I'm not sure what could happen if I choose Server Side Code. I know it's a hit back to the server but what can make the Server Side Code fail as compared to having Javascript disabled and user cannot make any change.
ASKER
@leakim971,
Your code works to but your code seems more confusing to understand and is more technical than sonawanekiran. What is the differenece between yours and sonawanekiran?
Your code works to but your code seems more confusing to understand and is more technical than sonawanekiran. What is the differenece between yours and sonawanekiran?
For end user perspective client side code is always recommended. But server side code is always safer.
ASKER
Could you explain that again but easier so I can understand :) For what reasons do you say that?
ASKER
Also, if you where to built an Online Registration form which method would you choose for this and why?
ASKER
@sonawanekiran,
Can you please explain a little bit more in depth on comments 36961682 and 36961696 so I can close this post.
Can you please explain a little bit more in depth on comments 36961682 and 36961696 so I can close this post.
Open in new window
Full page :
Open in new window