Question: 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)

This is the code I have so far.

```js
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';
  }
}
```

```html
<input name="q1" type="radio" value="A" onchange="showStuff('A', this); return false;" />
<input name="q1" type="radio" value="B" onchange="showStuff('B', this); return false;" />

<div id="A" style="display:none">
  This should display only when A button is clicked
</div>
<div id="B" style="display:none">
  This should display only when B button is clicked
</div>
```

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

Answer: 
You are almost there..just add one line of code to hide both divs on each click.

Using jQuery:

`$("#A,#B").hide();`

Without jQuery:

`document.getElementById("A").style.display = 'none';
 document.getElementById("B").style.display = 'none';`

See full working code below:

```js
function showStuff(id, btn) {
  $("#A,#B").hide(); // hide both each time

  document.getElementById(id).style.display = 'block';

}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="q1" type="radio" value="A" onchange="showStuff('A', this); return false;" />
<input name="q1" type="radio" value="B" onchange="showStuff('B', this); return false;" />

<div id="A" style="display:none">
  This should display only when A button is clicked
</div>

<div id="B" style="display:none">
  This should display only when B button is clicked
</div>
```
```js
function showStuff(value,btn) {
  if(value=='A'){
  document.getElementById("A").style.display = 'block';
  document.getElementById("B").style.display = 'none';
  }
   else if(value=='B'){
     document.getElementById("B").style.display = 'block';
  document.getElementById("A").style.display = 'none';
   }

}
```

```html
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<input name="q1"  type="radio" value="A" onchange="showStuff('A', this); return false;" />
<input name="q1"  type="radio" value="B" onchange="showStuff('B', this); return false;"/>

<div id="A"  style="display:none">
This should display only when A button is clicked
</div>

<div id="B"  style="display:none">
This should display only when B button is clicked
</div>  </body>

</html>
```