View Full Version : Help - script to show & hide multiple divs

07-06-2011, 01:31 PM
Hi, I am new to javascript so any help would be much appreciated.

I found the following script online to show/hide a login div.

<script language="JavaScript" type="text/javascript">
function login(showhide){
if(showhide == "show"){
}else if(showhide == "hide"){

It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide.

I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy.

Thanks, James

07-06-2011, 01:57 PM
Hm I don't get this. Obviously you know how to pass a parameter to a function, because you are already doing this with the parameter showhide. Or did you copy the script somewhere and you don't understand how it works?

Nevertheless ... to add another parameter to the function, you add a comma and the parameter name to the list. Then you can access the parameter inside the function exactly the same as "showhide".

function login(elementID, showhide) {
document.getElementById(elementID).style.visibility = "visible";

07-06-2011, 02:25 PM
Hi icue,

Do you really need handle visibility by changing the 'visiblity' parameter, not the 'display' one? There is main difference between these parameters:

display == 'none' hides totally a html-element on a page and leaves the place whereas visibility == 'hidden' hides a html-element but keeps a place borrowed by an element.

The simplest way to hide/show elements on a page is switching of the display parameter between 'none' to hide and 'block' to show. But the best way is to use a class with the single CSS-rule, for example

.hidden {
display: none;

When you need to hide an element -- just add the class 'hidden' to each element that should be hidden and remove this class to show elements again.

Try the example from this post http://www.codingforums.com/showpost.php?p=1004060&postcount=13

07-06-2011, 09:02 PM
Hi, Thanks for the replying.

Yes I did copy the script and because I am new to Javascript I may not fully understand it.
The example in this link (http://www.codingforums.com/showpost...0&postcount=13) also works well but I understand it even less.

I need to know how to pass a value into the function from my link. I have the follow:
<p><a href="javascript:login('show');">login</a></p>
so that getElementById does not always open 'popupbox' but any div I choose. I also need the div to appear over other div's without moving or displacing anything else on the page. I have tried various ways that I have found online but not found the answer.

Thanks, James

low tech
07-07-2011, 01:03 AM
Hi icue

have a look at this

It uses display: block or none, but if you prefer visibility: visible or hidden just say so.

I think you can work this out.

<!doctype html>
<title>Show Hide</title>

<script type="text/javascript">
function showHide(id) {
var div = document.getElementById(id);
div.style.display = ( div.style.display == "none") ? "block" : "none";

<a href="#undefined" onclick="showHide('n1')">Line one</a>
<a href="#undefined" onclick="showHide('n2')">Line two</a>
<a href="#undefined" onclick="showHide('n3')">Line three</a>

<div id="n1" style="display:none;"><p>div one</p></div>
<div id="n2" style="display:none;"><p>div two.</p></div>
<div id="n3" style="display:none;"><p>div three etc etc.</p></div>


These div's are all hidden to begin,
but for example If you want to show any div first,
just change <div id="n2" style="display:none;"> to <div id="n2" style="display:block;">


07-07-2011, 08:09 AM

Thanks LT and all who responded.
I think your script will do the trick.

Thanks again.