Overlay div for multiple divs

Question

I'd like to make a div overlay for multiple divs. This code does

function showOverlay() 
 { 
   var o = document.getElementById('overlay'); 
   o.style.visibility = 'visible'; 
 } 

 function hideOverlay() 
 { 
   var o = document.getElementById('overlay'); 
   o.style.visibility = 'hidden'; 
 } 

How can I make this code work so that I don't have to duplicate the javascript with a new ElementId for each div I'd like to hide/show ?

<a href="javascript:hideOverlay();">hide</a></div>
<a href="javascript:showOverlay();">show</a>

Thanks.

Answer 1

See this fiddle http://jsfiddle.net/5sVvA/

Use jquery with this function

$('.showlink').click(function () {
    $('#' + $(this).attr('rel')).show();
});

$('.hidelink').click(function () {
    $('#' + $(this).attr('rel')).hide();
});

Then create <a> links with class showlink or hidelink or whatever class depending on what function do you want to call and rel='XXX' where XXX is the ID of the div you want to show/hide, you must make a new link with a new rel for each div that you want to hide or show.

If I misunderstood your question please tell me.

To set it hidden by default, you must use in css display: none; for the divs you want to be hidden by default, then if you click on hide, nothing hapens (it is already hidden!) but on show, it will show up, and if you then click on hide, it will hide again :)

About the rel stuff on css, you can't, it is a HTML property, not a css one, you must set it on the <a> tag.

To hide the text among it's div, you can use this http://jsfiddle.net/robhunter/5sVvA/1/ and adapt it to your code, basically you set it hidden by default, and when you click on show link, you find the hide link and show it up.

With this code, you must set an id to each link with this format

rel + hidelink in this case it will be overlay1hidelink because rel=overlay1 , so for rel=overylay2 it will be overlay2hidelink and so on...

Answer 2

Give all the <a>'s that you want for this the same class. And then give any new <a>'s you add later the same class as well..

and then use document.getElementsByClassName document.getElementsByClassName