Link to home
Start Free TrialLog in
Avatar of Brian
BrianFlag for United States of America

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.
<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>

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image

Put this in the head section :
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $(":radio", "#<%= RadioButtonList1.ClientID %>").change(function () {
            if ($(":radio[value='1']", "#<%= RadioButtonList1.ClientID %>").is(":checked")) {
                $("#<%= Panel1.ClientID %>").hide();
                $("#<%= Panel2.ClientID %>").show();
            }
            else {
                $("#<%= Panel2.ClientID %>").hide();
                $("#<%= Panel1.ClientID %>").show();
            }
        })
    })
</script>

Open in new window


Full page :

<%@ Page Title="Page d'accueil" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
#<%= Panel1.ClientID %>, #<%= Panel2.ClientID %> 
{
    display:none;
}
</style>
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $(":radio", "#<%= RadioButtonList1.ClientID %>").change(function () {
            if ($(":radio[value='1']", "#<%= RadioButtonList1.ClientID %>").is(":checked")) {
                $("#<%= Panel1.ClientID %>").hide();
                $("#<%= Panel2.ClientID %>").show();
            }
            else {
                $("#<%= Panel2.ClientID %>").hide();
                $("#<%= Panel1.ClientID %>").show();
            }
        })
    })
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
   <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>
</asp:Content>

Open in new window

Avatar of Brian

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?
Avatar of Brian

ASKER

Your second post.
it's a screencast showing you the test page running...
ASKER CERTIFIED SOLUTION
Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Brian

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.
Avatar of Brian

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.
Avatar of Brian

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?
For end user perspective client side code is always recommended. But server side code is always safer.
Avatar of Brian

ASKER

Could you explain that again but easier so I can understand :) For what reasons do you say that?
Avatar of Brian

ASKER

Also, if you where to built an Online Registration form which method would you choose for this and why?
Avatar of Brian

ASKER

@sonawanekiran,

Can you please explain a little bit more in depth on comments 36961682 and 36961696 so I can close this post.