title: Jquery On and Off button click
body: <p>This is what I would like to accomplish. I have a div about us button that opens an about us page. I would like to disable the div about us button so that users can't click on it unless closing the about us page using the close button. Please check my attempt below. After clicking on the close button, the div about us button can't be clicked anymore.</p>
  
  <p>Please check JSfiddle <a href="http://jsfiddle.net/jvaHb/" rel="nofollow">http://jsfiddle.net/jvaHb/</a></p>
  
  <pre><code>    $(document).ready(function(e) {
      $('#btn-social').click(function(){
          var this_item = $(this).attr("data-item");
          $('.content-item').hide();
          $('.fade-container-' + this_item).fadeIn(2000);
          $('#btn-social').off('click');
      });
      $('#btn-close-social').click(function(){
          var this_item = $(this).attr("data-item");
          $('.content-item').hide();
          $('.fade-container-' + this_item).fadeIn(2000);
          $('#btn-social').on('click');
      });
  
      $('#btn-close-about').click(function(){
          var this_item = $(this).attr("data-item");
          $('.content-item').hide();
          $('.fade-container-' + this_item).fadeIn(2000);
          $('#btn-about').on('click');
      });
  
      $('#btn-about').click(function(){
          var this_item = $(this).attr("data-item");
          $('.content-item').hide();
          $('.fade-container-' + this_item).fadeIn(2000);
          $('#btn-about').off('click');
  
      });
      });
  </code></pre>