Question

I have a multistep form and I’m showing / hiding divs based on a radio input selection. The code below works when you click the input you want, but if I move to the next page and then back again, it “remembers” which option was selected but hides both divs again. Any suggestions?

$(document).ready(function() {
  if($('form#enter-details-form').length) {
        $("div[id^='p_option_']").hide('fast');

        $("input[name='p_method']:checked").each(function() {
            $("#p_option_" + $(this).val()).show();
        });

        $("input[name='p_method']").click(function() {
            $("div[id^='p_option_']").hide();
        $("#p_option_" + $(this).val()).show();
        });
  }
});


<div class="form-radios">
    <label><input type="radio" class="form-radio" value="0" name="p_method" id="edit-p-method-0"> Option 1 </label>
    <label><input type="radio" class="form-radio" value="1" name="p_method" id="edit-p-method-1"> Option 2</label>
</div>

<div id="p_option_0">Show this for option 0</div>
<div id="p_option_1">Show this for option 1</div>

Answer 1

Strangely enough removing the duration argument ('fast') from the initial .hide() seems to fix the problem.

Here is a working example: http://jsfiddle.net/qb2sk/