Make DIV visible on click LI

Question

I have an overlay of a div id that I want to make visible when the user clicks on the li that spans it.

HTML:

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

CSS:

 #overlay { visibility: hidden; } 

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: Now the code works. I changed the code to what I use. The overlay DIV # shows when LI.album clicked, however I have more than one of these LI albums next to each other and no matter which LI is pressed, #overlay is only displayed on the first LI. Any idea how to fix this?

Answer 1

The problem is how you used the css() jQuery method. You need to use to separate properties and values, not :

Same:

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

See here a working jFiddle example .

(Note that the OP has changed the way that property is written in the question since this post was written.)

UPDATE

I updated the code on JSFilddle to show how you can do this with a few li .

See here for a complete JSFiddle example

Initially, I changed my id overlay as a class. This is because an identifier can only exist once in any HTML document. This is a unique identifier, not a container.

Thr JS Code just looks at the current object (the one that just clicked) and finds all the children with the class name "overlay". He then sets the visibility for these elements.

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

Answer 2

Instead

  $("#overlay").css("visibility":"visible"); 

using

  $("#overlay").show(); 

or

  $("#overlay").css("visibility","visible"); 

To make it disappear after a period of time, take a look at setTimeout and use

  $("#overlay").hide(); 

Answer 3

Edit

 $("#overlay").css("visibility":"visible"); 

to

 $("#overlay").css("visibility", "visible"); 

Answer 4

Change $("#overlay").css("visibility":"visible"); on the:

 $(this).children("#overlay").css("visibility", "visible"); 

See fiddle for a live example.

Note. You must change overlay to a class attribute.

Answer 5

What do you mean? Do you want it to hide #overlay automatically too? "How can I change my code so that it disconnects after a while?" If you want this automatically, do the following:

 var hide = setTimeout(function () { $('#overlay').css('visibility', 'hidden'); }, 5000); 

And keep in mind that setting visibility to hidden only hides it, but still takes up space. Setting display: none (hide ()) completely hides it.

Another thing is that you should not use id for this div. As you probably know, the identifier can be used only once, and it was said that you can never use your function for several lithiums with the same functionality. I would make it a class, and then:

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

That way, it will work on everyone that has an overlay div.