Question

I am having two radiobuttons,

<div class="class1">
<span><input name="chk1" type="radio" checked="checked" id="check1"/>Option 1</span>
<span><input name="chk2" type="radio" id="check2"/>Option 2</span>
</div>

Now, i am displaying a hidden div using Jquery when the radio button with an ID check1 is cliked and hiding the same div when the radio button with an ID check2 is clicked, here is the code for that,

$(document).ready(function(){
    $("#check1").click(function(){
                                            $("#detail").slideDown("slow");
    });


    $("#check2").click(function(){ 
                                            $("#detail").slideUp("slow");
    })
}); 

My problem is, when an ID check1 is clicked(Div is displayed now) and the values are posted to the server and while return back to the same page, the div is not getting displayed, even though the option check1 is clicked. Is there any other way to retain the div using attr :checked or something? Appreciate your help…

Answer 1

$(document).ready(function(){
    if ($("#check1:checked").length) {
        $("#detail").slideDown("slow");
    }

    $("#check1").click(function(){
        $("#detail").slideDown("slow");
    });


    $("#check2").click(function(){ 
        $("#detail").slideUp("slow");
    })
});