title: How can I trigger jQuery fadeIn() fadeOut() from a <div> element
body: <p>I have a hidden element on the page: <code>&lt;div id="hidden"&gt;&lt;/div&gt;</code></p>
  
  <p>I have another element on the page that I want to be a button trigger: <code>&lt;div id="trigger"&gt;&lt;/div&gt;</code></p>
  
  <p>I want to do something like this:</p>
  
  <pre><code>$('#trigger').on('click', function(){
      if($(this).val() == 'clicked') {
          $('#hidden').fadeIn(700);
          $('#trigger').fadeOut(250);         
      }
  });
  </code></pre>
  
  <p>Do I have to do something to the <code>trigger</code> element in css and how do I listen for that event of clicking <code>trigger</code>?</p>