title: How to run jquery on Wix website?
body: <p>I know that the Wix doesn't support Jquery yet so the only option I have is to run it in their HTML editor. So I got the HTML, Jquery and CSS code running perfectly <a href="https://jsfiddle.net/aeyqpL8u/12/" rel="nofollow noreferrer">here</a> on jsfiddle.</p>
  
  <p>But when I try to run all these codes in their <strong>Edit code</strong> window, Jquery doesn't work and play/pause audio players loses its transition.</p>
  
  <p>Here's what I tried to do:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $('.control').on('mousedown', function() {
    $(this).toggleClass('pause play');
  });
  
  $(document).on('keyup', function(e) {
    if (e.which == 32) {
      $('.control').toggleClass('pause play');
    }
  });
  
  &lt;/script&gt;
  
  &lt;div class="control play trigger-audio"&gt;
    &lt;span class="left"&gt;&lt;/span&gt;
    &lt;audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor" volume="1.0"&gt;&lt;/audio&gt;
    &lt;span class="right"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div class="control play trigger-audio"&gt;
    &lt;span class="left"&gt;&lt;/span&gt;
    &lt;audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" volume="1.0"&gt;&lt;/audio&gt;
    &lt;span class="right"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;style type="text/css"&gt;
  .control {
      border: 2.0px solid #333;
      border-radius: 50%;
      margin: 20px;
      padding: 28px;
      width: 112px;
      height: 112px;
      font-size: 0;
      white-space: nowrap;
      text-align: center;
      cursor: pointer;
  }
  
  .control,
  .control .left,
  .control .right,
  .control:before {
      display: inline-block;
      vertical-align: middle;
      transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
      transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
  }
  
  .control:before {
      content: "";
      height: 112px;
  }
  
  .control.pause .left,
  .control.pause .right {
      margin: 0;
      border-left: 36.96px solid #333;
      border-top: 0 solid transparent;
      border-bottom: 0 solid transparent;
      height: 96.992px;
  }
  
  .control.pause .left {
      border-right: 22.4px solid transparent;
  }
  
  .control.play .left {
      margin-left: 18.66666667px;
      border-left: 48.496px solid #333;
      border-top: 28px solid transparent;
      border-bottom: 28px solid transparent;
      border-right: 0px solid transparent;
      height: 56px;
  }
  
  .control.play .right {
      margin: 0;
      border-left: 48.496px solid #333;
      border-top: 28px solid transparent;
      border-bottom: 28px solid transparent;
      height: 0px;
  }
  
  .control:hover {
      border-color: #000;
  }
  
  .control:hover .left,
  .control:hover .right {
      border-left-color: #000;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What am I doing wrong?</p>
  
  <p>I'm a beginner so any help would be appreciated. Thanks in advance :)</p>