title: using removeClass("hidden") to show/hide a div
body: <p>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.</p>
  <h1>help is the question mark image</h1>
  <p>.help-box refers to all the boxes from different pages
  .growing-plants &amp; .label-flower &amp; .types-animal are the different help boxes.
  This is my code :</p>
  <p>script.js file:</p>
  <pre><code>$('#help').mousedown(function() {
    if (currentSection == 1) {
      $('.growing-plants').removeClass(&quot;hidden&quot;);
    } else if (currentSection == 2) {
      $('.label-flower').removeClass(&quot;hidden&quot;);
    } else if (currentSection == 3) {
      $('.types-animal').removeClass(&quot;hidden&quot;);
    }
  });
  
  $('#help').mouseup(function() {
    if (currentSection == 1) {
        $('.growing-plants').addClass(&quot;hidden&quot;);
    } else if (currentSection == 2) {
        $('.label-flower').addClass(&quot;hidden&quot;);
    } else if (currentSection == 3) {
        $('.types-animal').addClass(&quot;hidden&quot;);
    }
  </code></pre>
  <p>});</p>
  <p>style.css file:</p>
  <pre><code>#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;
  }
  </code></pre>
  <p>html file:</p>
  <pre><code>&lt;img src=&quot;images/help-growing-plants.png&quot; class=&quot;help-box growing-plants&quot; alt=&quot;help&quot; width=&quot;600&quot; height=&quot;400&quot;&gt;
  &lt;img src=&quot;images/help-label-flower.png&quot; class=&quot;help-box label-flower&quot; alt=&quot;help&quot; width=&quot;600&quot; height=&quot;400&quot;&gt;
  &lt;img src=&quot;images/help-types-animal.png&quot; class=&quot;help-box label-flower&quot; alt=&quot;help&quot; width=&quot;600&quot; height=&quot;400&quot;&gt;
  </code></pre>
  <p>Any help or suggestions would be so appreciated!!!!</p>