A message

Have a toggle switch where I want to show textboxes based on what is selected on the toggle switch and need help on it. If Contract is selected I want to show contract row, if Order is select order row. Also how do I replace the row on top of the other row depending on which is selected from the toggle switch. So if I select Contract I want the Contract row/textbox to show obviously and if Order is selected, I want the Order row/textbox to show in the same spot as the Contract row/textbox.

Here is the code I have so far but need help completing it:

<divclass="col-md-3"><labelclass="switch2"><inputclass="switch-input2"type="checkbox"id="contractselection"name="contractselection"runat="server"/><spanclass="switch-label2"data-on="Contract"data-off="Order"></span><spanclass="switch-handle2"></span></label></div><divclass="col-xs-4"><divclass="contractrow"><labelfor="exampleInputCity">Contract:<spanclass="style1">*</span>:</label><asp:TextBoxID="contractnumber"class="form-control"name="contractnumber"placeholder=""runat="server"></asp:TextBox></div><asp:RequiredFieldValidatorID="rfvcontractnumber"runat="server"ControlToValidate="contractnumber"ErrorMessage="Please enter a Contract"></asp:RequiredFieldValidator><divclass="orderrow"><labelfor="exampleInputCity">Solicitation:<spanclass="style1">*</span>:</label><asp:TextBoxID="ordernumber"class="form-control"name="ordernumber"placeholder=""runat="server"></asp:TextBox></div><asp:RequiredFieldValidatorID="rfvsolicitationnumber"runat="server"ControlToValidate="ordernumber"ErrorMessage="Please enter a Order"></asp:RequiredFieldValidator></div></div></div>

javascript:

<scripttype="text/javascript">
    $(function () {
        $(".contractrow").show();
        $(".switch-input2").click(function () {
            if ($(this).is(":checked")) {
                $(".contractrow").show();
            } else {
                $(".solicitationrow").hide();
            }
        });
    });
</script>