title: Toggle Class Firing but No Changes Taking Place
body: <p>I know there are multiple threads on this topic, but none of them provide a fix for my issue.  </p>
  
  <p>I'm trying to implement a toggleClass feature - when a logo is clicked, the page goes dark and displays some text.  Click the logo again and the page is restored to the original style.  </p>
  
  <p>I can see the event firing in the developer console, but no changes are taking place.  I've tried using addClass &amp; removeClass in place of toggle, and I've tried messing with the z index of the visible element, no luck.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Here is a link to the site.  The logo is in the top left corner.</p>
  
  <p><a href="http://www.justincefai.co/" rel="nofollow noreferrer">Inline Link</a></p>
  
  <pre><code>&lt;a class="nav-link"&gt;&lt;%= image_tag "jclogo.png", alt: "logo", class: "jclogo", id: "jclogo"%&gt;&lt;/a&gt;
  
  &lt;div id="logo-bg" class="logo-bg"&gt;yo.&lt;/div&gt;
  </code></pre>
  
  <pre><code>.jclogo {
    float: left;
    padding-top: 5px;
    padding-left: 3px;
    padding-bottom: 5px;
    padding-right: 5px;
    margin-left: 35px;
    margin-top: 20px;
    height: 35px;
    width: 40px;
    cursor: pointer;
    transition: all ease-in-out 250ms;
  }
  
  .logo-bg {
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
  }
  
  .logo-bg .visible {
    opacity: 1;
    visibility: visible;
    z-index: 9000;
  }
  </code></pre>
  
  <pre><code>  $(document).ready(function() {
      var button = document.getElementById("jclogo");
  
      function cover() {
        $(".logo-bg").toggleClass("visible");
      }
      button.addEventListener("click", cover);
    });
  </code></pre>