Question

I have two radio buttons that are YES (value=1) and NO (value=0), I’m using the following code to show a hidden division when you click on YES:

     $("#regaddress").change(function(){
    if ($(this).val() == "1" ) {
        $("#registeredaddress").slideDown("fast"); //Slide Down Effect
    } else {
        $("#registeredaddress").slideUp("fast");    //Slide Up Effect
    }
});

Code for Radio Buttons:

<input name="regaddress" id="regaddress" type="radio" value="1">Yes
<input name="regaddress" id="regaddress" type="radio" value="0" checked> No 

What I need is the code to hide that division when you click NO. Should be a simple answer for some of you, but personally feel like banging my head against a wall this afternoon trying to work out how to hide it!

Answer 1

That’s easy enough, because you posted no id or name attributes in your original question, I’ve abstracted it out to the following:

html

<form action="" method="post">
    <fieldset>
        <input type="radio" value="0" name="state" id="no" />
        <label for="no">No</label>
        <input type="radio" value="1" name="state" id="yes" />
        <label for="yes">Yes</label>
    </fieldset>
</form>
<div id="hidden">This div is hidden</div>

jQuery

$(document).ready(
    function(){
        $('input:radio[name=state]').change(
            function(){
                if ($(this).val()==1) {
                    $('#hidden').show();
                }
                else {
                    $('#hidden').hide();
                }
            }
            );
    });

Demo of the above posted at JS Fiddle.

Amended slightly to take into account the slideUp() and slideDown() usage:

$(document).ready(
    function(){
        $('input:radio[name=state]').change(
            function(){
                if ($(this).val()==1) {
                    $('#hidden').slideDown(1000).text('This div is no longer hidden.');
                }
                else {
                    $('#hidden').slideUp(1000).text('This div is now hidden.');
                }
            }
            );
    });

Demo at JS Fiddle.

---

Final edit to take into account your id and name attributes:

$(document).ready(
    function(){
        $('input:radio[name=regaddress]').change(
            function(){
                if ($(this).val()==1) {
                    $('#registeredaddress').slideDown(1000).text('This div is no longer hidden.');
                }
                else {
                    $('#registeredaddress').slideUp(1000).text('This div is now hidden.');
                }
            }
            );
    });

Demo at JS Fiddle