How to display an element when radio button is selected and hide it when is not selected using javascript?
<p>I want to make an interactive online form. When people select one option of the 1st question, the according element will display when it is selected and hide when the other option is selected. (Other element should display when the other button is selected)</p>

<p>This is the code I have so far.</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 showStuff(id, btn) {
  if (document.getElementById(id).style.display == "none") {
    document.getElementById(id).style.display = 'block';
  } else if (document.getElementById(id).style.display == 'block') {
    document.getElementById(id).style.display = 'none';
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input name="q1" type="radio" value="A" onchange="showStuff('A', this); return false;" /&gt;
&lt;input name="q1" type="radio" value="B" onchange="showStuff('B', this); return false;" /&gt;

&lt;div id="A" style="display:none"&gt;
  This should display only when A button is clicked
&lt;/div&gt;
&lt;div id="B" style="display:none"&gt;
  This should display only when B button is clicked
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Once I display it, I cannot hide it when I select the other option. Do you have any good advice, please? Thanks very much!</p>