title: Showing a div when radio button selected
body: <p>I am creating a list of radio button selections for an order form. Each of the questions has an answer that contains a div with additional information. I have them all set up to show the div when the radio button is clicked, but when you go to the next question and click an option, it hides the above answer and unselects the radio button for the previous question. </p>
  
  <p><strong>Edit To Clarify: Only one of the radio button options should bring up the additional info box per question. So if you click yes to question 1, you get an info box. If you click NO on question 1, there is no info box.</strong> </p>
  
  <p>I would like the previous radio buttons to stay selected. I started with this code and modified it to have multiple questions:</p>
  
  <pre><code>  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;style type="text/css" media="screen"&gt;
    .hide{
      display:none;
    }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div id="tabs"&gt;
      &lt;div id="nav"&gt;
        &lt;p&gt;Show Div 1:&lt;input type="radio" name="tab" value="pkfrom" class="div1" /&gt;&lt;/p&gt;
        &lt;p&gt;Show Div 2:&lt;input type="radio" name="tab" value="pkfrom" class="div2" /&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="div1" class="tab"&gt;
        &lt;p&gt;this is div 1&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="div2" class="tab"&gt;
        &lt;p&gt;this is div 2&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script type="text/javascript" charset="utf-8"&gt;
      (function(){
        var tabs =document.getElementById('tabs');
        var nav = tabs.getElementsByTagName('input');
  
        /*
        * Hide all tabs
        */
        function hideTabs(){
          var tab = tabs.getElementsByTagName('div');
          for(var i=0;i&lt;=nav.length;i++){
            if(tab[i].className == 'tab'){
              tab[i].className = tab[i].className + ' hide';
            }
          }
        }
  
        /*
        * Show the clicked tab
        */
        function showTab(tab){
          document.getElementById(tab).className = 'tab'
        }
  
        hideTabs(); /* hide tabs on load */
  
        /*
        * Add click events
        */
        for(var i=0;i&lt;nav.length;i++){
          nav[i].onclick = function(){
            hideTabs();
            showTab(this.className);
          }
        }
      })();
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the jsfiddle: <a href="https://jsfiddle.net/lenniejane/d58phaua/" rel="nofollow">https://jsfiddle.net/lenniejane/d58phaua/</a></p>