title: jQuery toggling element position
body: <p>Trying to have jQuery toggle the position of a certain element so that I can hide and show it via a click event. I start out with my class having a property of position: absolute and left: 9000em (to keep it way off screen). Then I want to add another class with the property of left: 0 to bring the element back on screen. It is not working. Using jQuery 1.11.3. Here is my HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Hello&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link rel="stylesheet" href="css/normalize.css"&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'&gt;
      &lt;script src="js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
     &lt;section&gt;
  
         &lt;button id="toggle"&gt;Hello there&lt;/button&gt;
  
         &lt;div class="background"&gt;
  
         &lt;/div&gt; 
  
     &lt;/section&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>my CSS</p>
  
  <pre><code>.active {
      left: 0; 
  }
  
  .background {
      position: absolute;
      left: 9000em;
      background-color: lightgray;
      width: 500px;
      height: 100px;
  }
  </code></pre>
  
  <p>and my jQuery</p>
  
  <pre><code>$("document").ready(function() {
  
       $("#toggle").on("click", function(evt) {
  
          $(".background").toggleClass("active");
  
        });
  
  });
  </code></pre>