Make DIV visible on LI click

Question

I have a div id "overlay" that I want to make visible when the user clicks on the li that encloses it.

The HTML:

<ul>
    <li class="album" id="nirvana-nevermind">
         <div id="overlay">
              <a href="http://www.nirvana.com">Nirvana</a> Nevermind
         </div>
    </li>
</ul>

The CSS:

#overlay { visibility: hidden; }

The javascript:

$(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;
});

});

Update: 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?

Answer 1

The problem is in how you've used the css() jQuery method. You need to use a , to seperate the property and the value rather than a :.

Like so:

$(document).ready(function(){

$(".album").click(function() {
    $("#overlay").css("visibility", "visible");
});

});

See here for a working example on jFiddle.

(Note that the OP changed how they'd written the property in the question since writing this.)

UPDATE

I've updated the code on JSFilddle to show how you can do this with multiple li's.

See here for the full JSFiddle example

Firsly I've changed your id overlay to be a class instead. This is because an ID can only exist once in any given HTML document. It's a unique identifier not a container.

Thr JS Code is simply looking at the current object (the one just clicked) and finding all children with a class name of "overlay". It is then setting the visibility to visible for those items.

$(".album").click(function() {
   $(this).children(".overlay").css("visibility","visible");
});