CODEWITHSUNDEEP
jquerycss
Justin Cefai
Justin Cefai

Reputation: 151

Toggle Class Firing but No Changes Taking Place

I know there are multiple threads on this topic, but none of them provide a fix for my issue.

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.

I can see the event firing in the developer console, but no changes are taking place. I've tried using addClass & removeClass in place of toggle, and I've tried messing with the z index of the visible element, no luck.

Any help would be appreciated.

Here is a link to the site. The logo is in the top left corner.

Inline Link

<a class="nav-link"><%= image_tag "jclogo.png", alt: "logo", class: "jclogo", id: "jclogo"%></a>

<div id="logo-bg" class="logo-bg">yo.</div>

.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;
}

  $(document).ready(function() {
    var button = document.getElementById("jclogo");

    function cover() {
      $(".logo-bg").toggleClass("visible");
    }
    button.addEventListener("click", cover);
  });

Upvotes: 1

Views: 78

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19109

You're toggling a class on .logo-bg, so you need to chain the class names with no space between them.

Change this:

.logo-bg .visible {
  …
}

Into this:

.logo-bg.visible {
  …
}

Demo

$(document).ready(function() {
  var button = document.getElementById("jclogo");

  function cover() {
    $(".logo-bg").toggleClass("visible");
  }
  button.addEventListener("click", cover);
});
.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;
}

body {
  margin-top: 2em;
}

#jclogo {
  position: absolute;
  top: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="jclogo">button</button>
<div class="logo-bg"></div>

jsFiddle

Upvotes: 2

Related Questions