other not hidden

by riverguy

HTML

<h1 class="section">Gift Type</h1>

<div id="frequency" class="stripe-payment-form-row">
  <input type="radio" name="frequency" value="once" checked>One Time
  <input type="radio" name="frequency" value="Monthly">Monthly
</div>

<h1 class="section">Member Level or Gift Amount</h1>

<div id="onceRadios" class="stripe-payment-form-row radios">
  <input type="radio" name="level" value="2500" data-amount="2500" data-option="introOnce">Introductory $25<br>
  <input type="radio" name="level" value="4000" data-amount="4000" data-option="regOnce" checked>Regular Membership<br>
  <input id="onceOtherRadio" type="Radio" name="level" value="" data-amount="" data-option="otherOnce">Other $
  <input id="onceOtherText" type="text" name="otherOnce" value="0">
 </div>

<div id="moRadios" class="stripe-payment-form-row radios">
    <input type="radio" name="level" value="250" data-amount="250" data-option="introMo">Introductory $2.50/mo <p class="benefits">
    This is a paragraph describing the member benefits of the introductory level, it goes on and on</p><br>
  <input type="radio" name="level" value="400" data-amount="400" data-option="regMo">Regular $4/mo<br>
  <input id="moOtherRadio" type="Radio" name="level" value="" data-amount="" data-option="otherMo">Other $
  <input id="moOtherText" type="text" name="otherMo" value="0">
</div>


<div id="pmtMethodArea">
<h1 class="section">Payment Method</h1>
<div id="pmtButtons">
<button id="ccButton">Credit Card</button> - or -
<button id="ppButton">PayPal</button>
</div>
</div>

<div id="ccForm">
<p>This is the CC Form!</p>
</div>

<div id="ppForm">
<p>This is the PayPal Form!</p>
</div>

<input id="final" type="hidden" class="amount"  name="amount" value="" />

CSS

#frequency, #onceRadios, #moRadios, #pmtButtons {
  width: 300px;
  padding: 10px 10px 10px 10px;
  margin-top: 0px;
  margin-bottom: 10px;
  border-radius: 0px 0px 8px 8px;
  border-style: solid;
  border-width: 2px;
  border-color: green;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  position:relative;
  top: 0px;
}

button {
  border-style: solid;
  border-color: blue;
  border-width: 1px;
  border-radius: 6px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

.section {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #FFF;
  font-weight: 700;
  border-style: solid;
  border-width: 2px;
  border-color: green;
  border-radius: 8px 8px 0px 0px;
  background-color: green;
  width:300px;
  padding:4px 10px 4px 10px;
  position: relative;
  left:0px;
  z-index:1;
  margin:0px;
}

#onceOtherText, #moOtherText {
  width: 50px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}

.benefits {
  font-size: 12px;
  padding:8px;
  width: 200px;
  position:absolute;
  left:250px;
  top:-10px;
  background-color: #FFF;
  border-radius: 8px;
  visibility:hidden;
}

JavaScript

$(document).ready(function() {

  $("#moRadios, #ccForm, #ppForm").hide();

  $("[name=frequency]").change(function() {

    $("#onceRadios, #moRadios").slideToggle(800);

  });

  $("#onceOtherText").blur(function() {
  
     var amtCts=$(this).val() * 100;
  
     $("#onceOtherRadio").attr("Value", amtCts);
     $("#onceOtherRadio").attr("data-amount", amtCts);
     $("#onceOtherRadio").prop("checked","checked");
     
  });
  
  $("#moOtherText").blur(function() {
  
     var amtCts=$(this).val() * 100;
  
     $("#moOtherRadio").attr("Value", amtCts);
     $("#moOtherRadio").attr("data-amount", amtCts);
     $("#moOtherRadio").prop("checked","checked");
     
  });
 
  $("#ccButton").click(function() {
    $("#final").val($(".radios input:checked").val());
 //   alert("selected amount: " + $(".radios input:checked").val());
    $("#ppForm").slideUp();
    $("#pmtMethodArea").slideUp();
    $("#ccForm").slideDown(500);
 //   alert("final amount: " + $("#final").val());

  });
  
   $("#ppButton").click(function() {
     
    $("#ccForm").slideUp();
    $("#ppForm").slideDown(500);

  });

});