title: Show/ Hide by Div Id
body: <p>I have several fields in a form and if a user clicks on one field I want to display a table otherwise if they click another field the table should be hidden.</p>
  
  <p>I tried this javascript but when other fields are clicked it doesn't hide the table:</p>
  
  <pre><code>&lt;script&gt;
  function myFunction() {
      if (document.getElementById("userform")) {
          document.getElementById("userinfo").style.display="block";
      } else {
          document.getElementById("userinfo").style.display="none";
      }
  }
  
  &lt;/script&gt;   
  </code></pre>
  
  <p>On each field I have included a <code>onclick="myFunction()"</code> within each input type. The table is set to <code>style="display:none"</code></p>
  
  <p>This is the HTML:</p>
  
  <pre><code>    &lt;form class="form-horizontal" role="form"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="hest" class="col-sm-1 control-label"&gt;&lt;b&gt;Pi&lt;/b&gt;&lt;/label&gt;
              &lt;div class="col-sm-10"&gt;
                  &lt;input type="tel" class="form-control" id="userform"
                      placeholder="Enter your unique Pi identity" onclick="myFunction()"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="inputPassword1" class="col-sm-1 control-label"&gt;
                   &lt;b&gt;Password&lt;/b&gt;
              &lt;/label&gt;
              &lt;div class="col-sm-10"&gt;
                  &lt;input type="password" class="form-control" id="inputPassword1"
                      placeholder="Password" onclick="()"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                  &lt;button type="submit" class="btn btn-sample btn-lg"&gt;
                      &lt;b&gt;Submit&lt;/b&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
  
  
  
  
      &lt;div id="userinfo" class="collapse in" style="display:none"&gt;
          &lt;table class="table table-bordered" id="phone-table"&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td class="col-md-1"&gt;&lt;button type="button"
                              class="btn btn-primary btn-xs1"&gt;
                              &amp;nbsp;&lt;br&gt; &lt;b&gt;1&lt;/b&gt;
                          &lt;/button&gt;
                      &lt;/td&gt;
                      &lt;td class="col-md-1"&gt;
                          &lt;button type="button"
                              class="btn btn-primary btn-xs1"&gt;
                              &lt;b&gt;ABC&lt;br&gt;2
                              &lt;/b&gt;
                          &lt;/button&gt;
                      &lt;/td&gt;
                      &lt;td class="col-md-1"&gt;&lt;button type="button"
                              class="btn btn-primary btn-xs1"&gt;
                              &lt;b&gt;DEF&lt;br&gt;3
                              &lt;/b&gt;
                          &lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="col-md-1"&gt;&lt;button type="button"
                              class="btn btn-primary btn-xs1"&gt;
                              &lt;b&gt;GHI&lt;br&gt;4
                              &lt;/b&gt;
                          &lt;/button&gt;&lt;/td&gt;
                      &lt;td class="col-md-1"&gt;&lt;button type="button"
                              class="btn btn-primary btn-xs1"&gt;
                              &lt;b&gt;JKL&lt;br&gt;5
                              &lt;/b&gt;
                          &lt;/button&gt;&lt;/td&gt;
                      &lt;td class="col-md-1"&gt;&lt;button type="button"
                              class="btn btn-primary btn-xs1"&gt;
                              &lt;b&gt;MNO&lt;br&gt;6
                              &lt;/b&gt;
                          &lt;/button&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="col-md-1"&gt;&lt;button type="button"
                              class="btn btn-primary btn-xs1"&gt;
                              &lt;b&gt;PQRS&lt;br&gt;7
                              &lt;/b&gt;
                          &lt;/button&gt;&lt;/td&gt;
                      &lt;td class="col-md-1"&gt;&lt;button type="button"
                              class="btn btn-primary btn-xs1"&gt;
                              &lt;b&gt;TUV&lt;br&gt;8
                              &lt;/b&gt;
                          &lt;/button&gt;&lt;/td&gt;
                      &lt;td class="col-md-1"&gt;&lt;button type="button"
                              class="btn btn-primary btn-xs1"&gt;
                              &lt;b&gt;WXYZ&lt;br&gt;9
                              &lt;/b&gt;
                          &lt;/button&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="col-md-1"&gt;&lt;button type="button"
                              class="btn btn-primary btn-xs1"&gt;
                              &lt;b&gt;&lt;i class="fa fa-arrow-circle-left"&gt;&lt;/i&gt;&lt;br&gt;Del&lt;/b&gt;
                          &lt;/button&gt;&lt;/td&gt;
                      &lt;td class="col-md-1"&gt;&lt;button type="button"
                              class="btn btn-primary btn-xs1"&gt;
                              &lt;b&gt;&amp;nbsp;&lt;br&gt;0
                              &lt;/b&gt;
                          &lt;/button&gt;&lt;/td&gt;
                      &lt;td class="col-md-1"&gt;&lt;button type="button"
                              class="btn btn-primary btn-xs1"&gt;
                              &lt;b&gt;&lt;i class="fa fa-eraser"&gt;&lt;/i&gt;&lt;br&gt;Clr&lt;/b&gt;
                          &lt;/button&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>