title: Lock and unlock page with jQuery?
body: <pre><code>&lt;body&gt;
      &lt;span id="lock"&gt;lock&lt;/span&gt;
      &lt;div id="one"&gt;test test&lt;/div&gt;
      &lt;div id="three" style="display: none"&gt;hide&lt;/div&gt;
      &lt;span id="two"&gt;test&lt;/span&gt;
      &lt;div id="div_lock"&gt;
          Enter password: &lt;input type="password"&gt; &lt;input type="button" value="unlock" id="unlock"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  $('#lock').click(function(){
    $('#div_lock').show();
      //????
  })
  
  $('#unlock').click(function(){
    $('#div_lock').hide();
  //????
  })
  </code></pre>
  
  <p>if i click LOCK then i would like open div_lock and hide all other elements in page. And if i click unlock then hide div_lock and show previous elements.</p>
  
  <p>Can i use other function than .hide? If i use hide then is possible to check SOURCE code. Maybe any variables with SIMPLE hash etc? 
  If not how can i make this with .hide() and show()? I can  use also PHP and Ajax</p>
  
  <p>View the jsfiddle <a href="http://jsfiddle.net/BKkrM/" rel="nofollow">here</a>.</p>