title: Make DIV visible on LI click
body: <p>I have a <code>div</code> id "overlay" that I want to make visible when the user clicks on the <code>li</code> that encloses it. </p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="album" id="nirvana-nevermind"&gt;
           &lt;div id="overlay"&gt;
                &lt;a href="http://www.nirvana.com"&gt;Nirvana&lt;/a&gt; Nevermind
           &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>#overlay { visibility: hidden; }
  </code></pre>
  
  <p>The javascript:</p>
  
  <pre><code>$(document).ready(function(){
  
  $(".album").click(function() {
      //need the following to toggle
      $("#overlay").css("visibility", "visible");    
  });
  
  $("#overlay").click(function() {
      window.location=$(this).find("a").attr("href");
      return false;
  });
  
  });
  </code></pre>
  
  <p><strong>Update:</strong> The code is working now. I've modified the code to what I am using. The DIV#overlay shows when the LI.album is clicked, however, I have more than one of these LI.albums next to each other and no matter which LI is clicked, the #overlay only shows on the very first LI. Any idea how to fix this?</p>