title: Add or Remove class on click - Javascript
body: <p>I am trying to add a class when you click on a box then remove the class when you click the button. But no class os added or removed.</p>
  
  <pre><code>var leftBox = document.getElementsByClassName("left");
  var rightBox = document.getElementsByClassName("right");
  
  function expandLeft() {
    leftBox.className = leftBox.className + "zero-width";
    rightBox.className = rightBox.className + "full-width";
  }
  function expandRight() {
    leftBox.className = leftBox.className + "full-width";
    rightBox.className = rightBox.className + "zero-width";
  }
  
  function originalLeft(){ 
    leftBox.removeClass(leftBox, "zero-width");
    rightBox.removeClass(rightBox, "full-width");
  }
  
  function originalRight(){ 
    leftBox.removeClass(rightBox, "full-width");
    rightBox.removeClass(leftBox, "zero-width");
  }
  
  
  
  &lt;div class="row"&gt;
  &lt;div class="wrapper flex full-width"&gt;
  &lt;div class="form_wrapper flex full-width"&gt;
  &lt;div class="left"&gt;
  &lt;div class="form_wrapper--left" onclick="expandRight()"&gt;
  &lt;div&gt;&lt;button id="shrink" onclick="originalLeft()"&gt;click here&lt;/button&gt; . 
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- END OR RIGHT BOX --
  &lt;!-- START OR RIGHT BOX --&gt;
  &lt;div class="right"&gt;
  &lt;div class="form_wrapper--right" onclick="expandLeft()"&gt;
  &lt;div&gt;
  &lt;button id="shrink" onclick="originalLeft()"&gt;click here&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--- END of Right Box ---&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The effect should be that when you click one box it expands left and you can click a button and it returns. Vice versa for the other side.</p>