title: Jquery toggleActive does not work
body: <p>I dont really know how to code in Javascript. For an Airconsole I need to create the Controllers tho because it happens that I am the only one on our team able to use CSS and HTML.</p>
  
  <p>Now I wanted to create a button that changes the color, as it was pressed (and stays that color)
  Well I tried, but cant figure out how to get it to work. I hope you can help me.</p>
  
  <p>My HTML :</p>
  
  <pre><code>&lt;div id="characterScreen_readyButton" class="characterScreen_center" ontouchend="sendReady();" ontouchend="sendReady();"&gt;
      &lt;div class="readyButton"&gt;           
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here my CSS :</p>
  
  <pre><code>.readyButton{
              height: 100%;
              width: 100%;
              margin: 0;
              padding: 0;
              background: url("images/readyButton.png") no-repeat center;
              background-size: contain;
  
          }
  
  .readyButton.active {
              height: 100%;
              width: 100%;
              margin: 0;
              padding: 0;
              background: url("images/readyButtonP.png") no-repeat center;
              background-size: contain;
          }
  </code></pre>
  
  <p>And my Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js" &gt;
  $('.readyButton').click(function(){
      if($(this).hasClass('active')){
          $(this).removeClass('active')
      } else {
          $(this).addClass('active')
      }
  });
  &lt;/script&gt;
  </code></pre>