title: How to unhighlight button after other button is clicked (Web CSS Bootstrap)
body: <p>I have a signup page with two buttons. When one button is clicked, the corresponding container displays. When a button is clicked the bg color changes and sticks, even after I select the other button. Then, if I select the button again it goes back to its unselected/inactive color.</p>
  
  <p>I want the clicked button to maintain its active color, but only if the other button is not clicked. If the other button is clicked, I want the first button to go back to its original bg color.</p>
  
  <p>Here is the js:</p>
  
  <pre><code>&lt;script type = "text/javascript"&gt;
    function displayForm(c) {
      if (c.value == "1") {
  
        document.getElementById("container1").style.display = 'inline';
        document.getElementById("container2").style.display = 'none';
      } else if (c.value == "2") {
        document.getElementById("container1").style.display = 'none';
  
        document.getElementById("container2").style.display = 'inline';
      } else {}
    } 
  &lt;/script&gt;
  </code></pre>
  
  <p>And here are the buttons (sorry for formatting issues):</p>
  
  <pre><code>                        &lt;!--SELECTION BUTTONS--&gt;
                              &lt;form&gt;
                                  &lt;div class="control-group"&gt;
  
                                      &lt;label class="control-label"&gt;Are you a:&lt;/label&gt;
  
                                      &lt;div class="controls"&gt;
  
                                              &lt;p&gt;&lt;div id="account-type" name="account-type" class="btn-group selection-buttons" data-toggle="buttons-radio"&gt;
  
                                              &lt;button value="1" type="button" name="formselector" onClick="displayForm(this)" id="button1" class="btn btn-info"&gt;
                                              Buttons1&lt;/button&gt;
  
                                              &lt;button value="2" type="button" name="formselector" onClick="displayForm(this)" id="button2" class="btn btn-info"&gt;Button2&lt;/button&gt;
  
                                            &lt;/div&gt;&lt;/p&gt;
  
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
                              &lt;/form&gt;
  </code></pre>
  
  <p>Here is the CSS (using Bootstrap):</p>
  
  <pre><code>/* SWITCH BUTTONS */
  .selection-buttons button{
      width: 140px;
      height: 60px;
      color: #FFF;
      background-color: #FFB10D;
      border-color: #fff; /* e59f0b */
  }
  
  .selection-buttons .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
      color: #FFF;
      background-color: #00CC66;
      border-color: #fff; /* 00b75b */
  }
  </code></pre>
  
  <p>Thank you!!</p>