how to display particular div when particular radio button is selected

Question

I am trying to build something similar to this, http://www.tutorialrepublic.com/faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php, with the difference that after selecting the radio button, I also need to press a submit button in order to display the div that goes with that particular button. Also how do I swap the div displayed, should the client change their mind?

JS fiddle https://jsfiddle.net/nag0vdut/

HTML

<div class="steps">
    <h2>2. Valj din bankskivas</h2>
    <div id="step2">
        <span class="product" href="#" id="plan"><div class="plan" style="background-image:url(media/images/plan1.jpg);"><input class="radio" type="radio" value="plan1" name="plan"/></div><p>Enkel bankskiva</p></span>
        <span class="product" href="#" id="plan"><div class="plan"  style="background-image:url(media/images/plan2.jpg);"><input class="radio" type="radio" value="plan2" name="plan"/></div><p>L-form</p></span>
        <span class="product" href="#" id="plan"><div class="plan"  style="background-image:url(media/images/plan3.jpg);"><input class="radio" type="radio" value="plan3" name="plan"/></div><p>U-form</p></span>
        <span class="product" href="#" id="plan"><div class="plan"  style="background-image:url(media/images/plan4.jpg);"><input class="radio" type="radio" value="plan4" name="plan"/></div><p>Mattbestallning</p></span>
        <button type="button" class="nasta" onClick="processStep2()">Nasta</button>
    </div>
</div>
<div class="steps">
    <h2>3.  Närmare information</h2>
    <div id="step3">
        <div class="step_left">
            <div class="plan1">
                <h3>3.1. Välj bänkskivans mått (mm)*</h3>
                <div class="shape" id="plan1_shape">
                    <h2>
                        Plan 1
                    </h2>
                </div>
                <div class="shape" id="plan2_shape">
                    <h2>
                        plan 2
                    </h2>

                </div>  
                <div class="shape" id="plan3_shape">
                    <h2>
                        Plan 3
                    </h2>
                </div>

                <div class="shape" id="plan4_shape">
                    <h2>
                        Plan 4
                    </h2>
                </div>
                <div id="step3_p2">
                    <h3>3.2. Välj bänkskivans kantbehandling</h3>
                    <p><input type="checkbox" name="measures_show"/>Välj kantprofil samt bearbetnig av synliga kanter från ritningen ovan.</p>
                        <div class="plan_select">
                            <h3>Tiles - Selected</h3>
                            <?php bank_select("SELECT * FROM bankskivans WHERE typeID = 0"); ?>
                        </div>
                </div>
            </div>

Jquery

var tile, plan;

function _(x) {
    return document.getElementById(x);
}

function processStep2() {
    plan = _("plan").value;
    if ($(".radio").is(":checked")) {
        _("step2").style.display = "none";
        _("step3").style.display = "block";
        /* section I am having issues with */
        if ($(".radio").value.is(":checked") == "plan1") {

            $("#plan1_shape").style.display = "block";

        } else {
            alert("wrong window");
        }
        $("#phase2").removeClass("phase");
        $("#phase3").removeClass("main_list");
        $("#phase2").addClass("main_list");
        $("#phase3").addClass("phase");
    } else {
        alert("chose radio button")

    }
}

Answer 1

Try, in processStep2()

if ($('input[name=plan]:checked').val()) {
  $('#' + $('input[name=plan]:checked').val() + "_shape")[0].style.display = "block";
} 

As you say..on plan1 click plan1_shape will be display plan2 click plan2_shape will be display etc..

demo

Answer 2

Since you're using radiobuttons, there can only exist one radiobutton that is checked.

function process_step2(){

    divName = $(":checked").val(); //get the name of the phase you want to show
    $(".phases").hide();    //hide all phases initially
    $("#"+divName).show();  //only show the phase that you want to show
});

So you need to give every phase a classname like class = "phases" if you follow my example. Then hide them all, and then only show the one you want to show.