Question

I have created an editable form that allows users to edit their profile information.
This form can be saved and revisted so I need to be able to save the updates as the user goes along.
This is working ok.

The form is very long so in some sections I have fields that show / hide using jquery depending on the yes or no selections for a previous input.
This also works except that if a radio input is selected and saved whe the form is revisted the jquery has hidden the details field again.

So what I need is some help amending the following jquery code so that if neither radio button is seleced the details div is hidden but if the Yes option is selected and saved it will automatically open when the form is revisted! Thanks

$("#diet-details").hide();
$("input[name=diet]").click(function() {
    if ( $("#diet1").attr('checked'))
        $("#diet-details").hide();

    if ( $("#diet2").attr('checked'))
        $("#diet-details").show();
});      

Answer 1

You can pass the show/hide condition to the toggle function, and instead of always hiding the diet-details div in the beginning, check if diet1 option is checked and show it (or hide it) based on that,

$(function() {
  $('#diet-details').toggle($("#diet1").is(':checked'));

  $("input[name=diet]").click(function() {
    $('#diet-details').toggle($("#diet1").is(':checked'));
  }); 
});