?
Solved

Show/Hide Panels using Javascript/jQuery

Posted on 2011-10-12
14
Medium Priority
?
365 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:asp_net2
  • 8
  • 4
  • 2
14 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 36960032
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

0
 
LVL 83

Expert Comment

by:leakim971
ID: 36960038
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36960057
No flash is required for this. Why do you say I need flash plugin?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 83

Expert Comment

by:leakim971
ID: 36960061
>Why do you say I need flash plugin?

Where did I mention that?
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36960083
Your second post.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 36960094
it's a screencast showing you the test page running...
0
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 2000 total points
ID: 36960150
Just add below code in head tag of aspx page
<script>
  $(document).ready(function(){
    $("#<%= Panel2.ClientID %>").hide();
    $("#<%= Panel1.ClientID %>").show();
    
    $("#<%= RadioButtonList1.ClientID %>").change(function(){
       $("#<%= Panel2.ClientID %>").hide();
       $("#<%= Panel1.ClientID %>").hide();
      $(this).find('input:checked').val() == 1 ? $("#<%= Panel2.ClientID %>").show() : $("#<%= Panel1.ClientID %>").show();
    });
  });
  </script>

Open in new window

0
 
LVL 4

Author Comment

by:asp_net2
ID: 36961645
@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.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36961661
@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.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36961676
@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?
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36961682
For end user perspective client side code is always recommended. But server side code is always safer.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36961691
Could you explain that again but easier so I can understand :) For what reasons do you say that?
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36961696
Also, if you where to built an Online Registration form which method would you choose for this and why?
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36968293
@sonawanekiran,

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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question