We help IT Professionals succeed at work.

On radio click - show/hide content

Medium Priority
429 Views
Last Modified: 2012-05-12
I am working on a set of elements on the cart part to check out as a guest/new user/old user.

Basically I have been trying to do this:

1. Click new user and the hidden div shows for password, click existing user and then this hidden field shows.

So each one will open to a corresponding div inside. Any ideas on how I can get this done with jQuery?

I have an image here:

 Showing checkout
Thanks
Comment
Watch Question

Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
function sh(n) {
    for(var i=0;i<3;i++)  document.getElementById("div"+i).style.display = (n==i)?"block":"none";
}

<input type="radio" onchange="sh(0)"> Place my..
<input type="radio" onchange="sh(1)"> I'm new cu..
<input type="radio" onchange="sh(2)"> I'm an ex..

<div id="div0">....</div>
<div id="div1">....</div>
<div id="div2">....</div>

$(document).ready(function(){

$("#new").click(function() {
            $("#pass").hide();

      });

      $("#old").click(function() {

            $("#pass").show();

      });

      });
 
 
</script>
</head>
 
<body><br>
new user<input type='radio' id='new' name='new'><br>
existing user<input type='radio' id='old' name='new'><br>
Password:<input type='text' id='pass' style='display:none'>
@chaituu, how would I go about closing others once a user clicked a new one? Almost like resetting it to a global .hide?
$("#new").click(function() {
            $("#pass").hide();

      });

      $("#old").click(function() {

            $("#pass").show();

      });

      });
 
 
</script>
</head>
 
<body><br>
new user<input type='radio' id='new' name='new'><br>
existing user<input type='radio' id='old' name='new'><br>
<p id='pass' style='display:none'>
Password:
<input type='text'  name='pass'>
</p>
Sorry, this is the code I am working with
 
<table class="sub_cart">
                            <tr>
                                <td align="left" colspan="2"><label for="CustEmail">Email Address:</label>
                                <input type="text" name="CustEmail" id="CustEmail" size="30" maxlength="60" class="text"></td>
                            </tr>
                            <tr id="ebeans-newcust-no">
                                <td valign="top"><input type="radio" name="isNewCust" id="guest" value="2" onclick="this.form.CustEmail.optional=true; this.form.NewCustPassword.optional=true; this.form.CustPassword.optional=true;" checked="checked"></td>

                                <td align="left" colspan="2"><label for="guest">Place my order as a guest.</label></td>
                            </tr>

                            <tr id="ebeans-newcust-new">
                                <td valign="top"><input type="radio" id="isNewCust" name="isNewCust" value="1" onclick="this.form.CustEmail.regex=reEmail; this.form.NewCustPassword.optional=false; this.form.CustPassword.optional=true;"></td>

                                <td align="left"><label for="isNewCust">I am a new customer</label>
                                <div class="new_cust"><br>
                                I would like my password to be:<br>
                                <input type="password" name="NewCustPassword" id="NewCustPassword" size="15" maxlength="15" class="text"></div></td>
                            </tr>

                            <tr id="ebeans-newcust-old">
                                <td valign="top"><input type="radio" name="isNewCust" id="existing" value="0" onclick="this.form.CustEmail.regex=reEmail; this.form.NewCustPassword.optional=true; this.form.CustPassword.optional=false;"></td>

                                <td align="left"><label for="existing">I am an existing customer</label>
                                <div class="old_cust">
                                <br>
                                and my password is:<br>
                                <input type="password" name="CustPassword" id="CustPassword" size="15" maxlength="15" class="text">
                                </div>
                                </td>
                            </tr>

                            <tr>
                                <td align="left" valign="top">&nbsp;</td>

                                <td align="left" valign="top"><a href="#" onclick="javascript:oProp = { width:450, height:300 };popUp2('password_win.php','defaultWindow',oProp); return false;">forget your password?</a><br>
                                <a href="#" onclick="javascript:oProp = { width:450, height:300 };popUp2('https://blackriverroasters.e-beans.net/cart/password_reset.php','defaultWindow',oProp); return false;">need to reset your password?</a></td>
                            </tr>
                        </table>

Open in new window

if new user clicks radio button we are hiding forgot password label as well as text box.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
test page : http://jsfiddle.net/5vwNA/1/

>Sorry, this is the code I am working with
a bit late...
Check out my code above, that is what I am working with.

                                <div class="old_cust"> for example hides the code. On click show that panel
      <div class="old_cust" id="old_cust">

use id ;by using id you can show the panel.

document.getElementById("old_cust").style.display="block";
if you want hide that panel
document.getElementById("old_cust").style.display="none";
I know I can change the class. I am looking for the best way to do this using jQuery since all my other code throughout is using that. I know jQuery is a framework over JS but I prefer that.

I have been trying to make it dynamic like @chaituu solution. Let me try that code and ill let you know.

Ryan
@leakim971 - that solution worked great, made some small tweaks. no real need to use jQuery when that got the job done. More dynamic too.

Ryan
Ah, leakim, meant to add what is the best way to reset it? So if I click one, the other previous hides?
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
basically you have three :

I use the loop to short the code else :

function sh(div_id_to_show) {
    document.getElementById("divx").style.display = (div_id_to_show=="divx")?"block":"none";
    document.getElementById("old_cust").style.display = (div_id_to_show=="old_cust")?"block":"none";
    document.getElementById("divy").style.display = (div_id_to_show=="divy")?"block":"none";
}

Explore More ContentExplore courses, solutions, and other research materials related to this topic.