Question

I have a form that the user can save and return to edit. I have an area on the form that toggles a div based on the user’s answer to a previous question. If the answer is ‘yes’, the div should display. However, if the user returns to the form, and ‘yes’ is selected, the div remains hidden.

Working example here: http://jsfiddle.net/BbrwT/

HTML:

<div>
    <label>Select:</label>
    <input type="radio" name="radio" class="toggle" value="1" checked="checked">Yes
    <input type="radio" name="radio" class="toggle" value="0">No
</div>

<div id="details">
   Details
</div>

Javascript:

$(document).ready(function() {

    $('#details').hide();

    $('.toggle').on('change',function(){

        var showOrHide = ($(this).val() == 1) ? true : false;

        $(this).parent().next('#details').toggle(showOrHide);

    })    

})

Answer 1

That is because you’re explicitly hiding the details div on document.ready

Check the value of the radiobutton first.

$(document).ready(function() {

    if($('.toggle:checked').val() != 1)
        $('#details').hide();

    ...

})