title: Radio button with additional text field javascript
body: <p>I have 3 radio buttons for: </p>
  
  <ul>
  <li>Allowance</li>
  <li>Tuition</li>
  <li>School</li>
  </ul>
  
  <p>If I click the Radio Button for Allowance, it will open the <code>ul</code> list .</p>
  
  <p>Now, the Radio Button for Allowance should be closed after clicking the Radio Button for Tuition</p>
  
  <p>When I click the Radio Button for "Not full Tuition", I am supposed to type in the text field for Money but it closes on its on.</p>
  
  <p>I want to prevent it from closing after clicking "Not Full Tuition Fee" so I can type a value in the Money textfield.</p>
  
  <p>It will also just close if I click the Radio Button for School.</p>
  
  <p>How can I get this to work?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Allowance(select) {
    if (select.value == 'Allowance') {
      document.getElementById('allowance').style.display = "block";
    } else {
      document.getElementById('allowance').style.display = "none";
    }
  }
  
  function Tuition(select) {
    if (select.value == 'Tuition Fee') {
      document.getElementById('tuition_fee').style.display = "block";
    } else {
      document.getElementById('tuition_fee').style.display = "none";
    }
  }
  
  function Supply(select) {
    if (select.value == 'School Supply') {
      document.getElementById('school_supply').style.display = "block";
    } else {
      document.getElementById('school_supply').style.display = "none";
    }
  }
  
  function Not_Full(select) {
    if (select.value == 'Not Full') {
      document.getElementById('Not_Full').style.display = "block";
    } else {
      document.getElementById('Not_Full').style.display = "none";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="radio" name="ship_need" value="Allowance" id="test" onchange="Allowance(this)"&gt; Allowance&lt;br&gt;
  &lt;div id="allowance" style="display: none;"&gt;
    &lt;ul&gt;
      &lt;li&gt;Food Allowance&lt;/li&gt;
      &lt;li&gt;Transportation Allowance&lt;/li&gt;
    &lt;/ul&gt;
    &lt;label class="control-label"&gt;Money:&lt;/label&gt;
    &lt;input type="text"&gt;
  &lt;/div&gt;
  &lt;input type="radio" name="ship_need" value="Tuition Fee" id="test" onchange="Tuition(this)"&gt; Tution&lt;br&gt;
  &lt;div id="tuition_fee" style="display: none;"&gt;
    &lt;ul&gt;
      &lt;li&gt;Tuition Fee&lt;/li&gt;
      &lt;input type="radio" name="test1" value="Full"&gt; Full Tuition Fee&lt;br&gt;
      &lt;input type="radio" name="test1" value="Not Full" id="test" onchange="Not_Full(this)"&gt; Not Full Tuition Fee&lt;br&gt;
    &lt;/ul&gt;
    &lt;div id="Not_Full" style="display: none;"&gt;
      &lt;label class="control-label"&gt;Money:&lt;/label&gt;
      &lt;input type="text"&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;input type="radio" name="ship_need" value="School Supply" id="test" onchange="Supply(this)"&gt; School
  &lt;div id="school_supply" style="display: none;"&gt;
    &lt;ul&gt;
      &lt;li&gt;Books&lt;/li&gt;
      &lt;li&gt;Uniform&lt;/li&gt;
    &lt;/ul&gt;
    &lt;label class="control-label"&gt;Money:&lt;/label&gt;
    &lt;input type="text"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>