title: Turn CSS Filter Brightness On and Off on Click
body: <p>I'm setting up a page with a button that dims parts of the page. I've modified some code I found here: <a href="http://www.jankoatwarpspeed.com/use-jquery-to-turn-off-the-lights-while-watching-videos/" rel="nofollow">http://www.jankoatwarpspeed.com/use-jquery-to-turn-off-the-lights-while-watching-videos/</a></p>
  
  <p>But I am very bad at javascript/jQuery and I'm not sure how to get it to do what I need it to.</p>
  
  <p>Here's the script:</p>
  
  <pre><code>$(document).ready(function(){
      $("#shadow").css("height", $(document).height()).hide();
      $(".lightSwitcher").click(function(){
          $("#shadow").toggle();
          if ($("#shadow").is(":hidden"))
              $(this).removeClass("turnedOff");
          else
              $(this).addClass("turnedOff");
      });
  }); 
  </code></pre>
  
  <p>And here's a jsfiddle: <a href="http://jsfiddle.net/e2b7dxa0/" rel="nofollow">http://jsfiddle.net/e2b7dxa0/</a></p>
  
  <p>I'd like it so that anything with the "shadow" id dims when the light switch is clicked. Right now anything with that id is hidden until the light switch is clicked and I'd like it to be visible whether or not the switch is on or off. I only want the switch to toggle the brightness filter in the CSS.</p>
  
  <p>Also, there is something in the jQuery that causes the height to expand to the height of the page and I'd like to remove that.</p>