title: Make a div tag toggle between two css classes
body: <p>What i want to do is to change the class of the div tag with a toggle button using javascript.
  So that when i press the button once the div tag gets the show class, and when i press the same button again it gets the hide class. Is this possible?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;a id="togglebutton"&gt;Show/hide&lt;/a&gt;
  
  &lt;div class="show"&gt; 
     I want this div to toggle between the 'show' class and the 'hide' class
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.show {
      display: block;
  }
  
  
  .hide {
      display: none;
  }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>function toggle(){
      var hide = document.querySelector(".hide");
      var show = document.querySelector(".show");
  
  }
  
  var hidebutton = document.querySelector(".togglebutton");
  hidebutton.onclick = toggle
  </code></pre>
  
  <p>Would <code>document.getElementById("MyId").className = "MyClass";</code> be usable somehow?</p>