CODEWITHSUNDEEP
jqueryhtmlcss
user3589485
user3589485

Reputation: 407

using removeClass("hidden") to show/hide a div

I am creating an interactive game using HTML, CSS and jQuery. On the bottom right hand corner there is a question mark (an image file, not text). What I am trying to make happen is when the question mark is clicked on and held down , a box shows up with help on it. When the mouse is released the box dissapears. There are three different help boxes for 3 different pages.

help is the question mark image

.help-box refers to all the boxes from different pages .growing-plants & .label-flower & .types-animal are the different help boxes. This is my code :

script.js file:

$('#help').mousedown(function() {
  if (currentSection == 1) {
    $('.growing-plants').removeClass("hidden");
  } else if (currentSection == 2) {
    $('.label-flower').removeClass("hidden");
  } else if (currentSection == 3) {
    $('.types-animal').removeClass("hidden");
  }
});

$('#help').mouseup(function() {
  if (currentSection == 1) {
      $('.growing-plants').addClass("hidden");
  } else if (currentSection == 2) {
      $('.label-flower').addClass("hidden");
  } else if (currentSection == 3) {
      $('.types-animal').addClass("hidden");
  }

});

style.css file:

#help {
     position: absolute;
     left:900px;
}

.help-box {
     position: absolute;
     top: 200px;
     left: 220px;
     z-index: 15;
}

.growing-plants {
     overflow: hidden;
}

.label-flower {
     overflow: hidden;
}

.types-animal {
     overflow: hidden;
}

html file:

<img src="images/help-growing-plants.png" class="help-box growing-plants" alt="help" width="600" height="400">
<img src="images/help-label-flower.png" class="help-box label-flower" alt="help" width="600" height="400">
<img src="images/help-types-animal.png" class="help-box label-flower" alt="help" width="600" height="400">

Any help or suggestions would be so appreciated!!!!

Upvotes: 2

Views: 36868

Answers (2)

andleer
andleer

Reputation: 22568

You need to initially hide your elements by styling them with display: none;

.help-box {
     position: absolute;
     top: 200px;
     left: 220px;
     z-index: 15;
     display: none;
}

Then you can use jQuery .show() and .hide()

$('#help').mousedown(function() {
  if (currentSection == 1) {
    $('.growing-plants').show();
  } else if (currentSection == 2) {
    $('.label-flower').show();
  } else if (currentSection == 3) {
    $('.types-animal').show();
  }
});

$('#help').mouseup(function() {
  if (currentSection == 1) {
      $('.growing-plants').hide();
  } else if (currentSection == 2) {
      $('.label-flower').hide();
  } else if (currentSection == 3) {
      $('.types-animal').hide();
  }

Upvotes: 3

Liv MacIntosh
Liv MacIntosh

Reputation: 153

Unless your "hidden" class is defined in a part of the code that you are not linking the problem is that using the .addClass(classNameYouWantToAdd) or .removeClass(classNameYouWantToAdd) is looking for a "hidden" class that you haven't defined.

The rest of your code should work if you defined a class that you then apply to the div containing what you want to hide like this

.hidden {
    visibility:hidden;
}

Upvotes: 1

Related Questions