javascript - Showhide specific divs - Stack Overflow|Programmer puzzle solving

I'm a bit of a JavaScript newbie, but I do know SOME basics, so I thought I could handle this. I'm trying to show specific DIVS when a page loads, but have them easily hideable when another DIV is clicked on.

I found something similar to this code somewhere and started with it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript"> 
function show( id ) { 
document.getElementById(id).style.display = 'block'; 
} 
function hide( id ) { 
document.getElementById(id).style.display = 'none'; 
} 
</script> 
</head>

<body>

<a href="#" onclick="show('box1'); hide('boxlink1')" class="boxlink" id="boxlink1" style="display:none;">box 1</a></p>
<div id="box1"> 
<p>Text of box 1</p> 
</div>

<a href="#" onclick="show('box2'); hide('boxlink2')" class="boxlink" id="boxlink2">box 2</a></p>
<div id="box2" style="display:none;"> 
<p>Text of box 2</p> 
</div>

<a href="#" onclick="show('box3'); hide('boxlink3')" class="boxlink" id="boxlink3">box 3</a></p>
<div id="box3" style="display:none;"> 
<p>Text of box 3</p> 
</div>

<a href="#" onclick="show('box4'); hide('boxlink4')" class="boxlink" id="boxlink4">box 4</a></p>
<div id="box4" style="display:none;"> 
<p>Text of box 4 </p> 
</div>

</body>
</html>

Great. This already does MOST of what I want it to do, except that I want it to re-show the hidden box titles when you click on a new box title, and hide the content of any box that is open.

So I tried this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript"> 
function show( id ) { 
document.getElementById(id).style.display = 'block'; 
} 
function hide( id ) { 
document.getElementById(id).style.display = 'none'; 
} 
</script> 
</head>

<body>

<a href="#" onclick="show(['box1','boxlink2','boxlink3','boxlink4']); hide(['boxlink1','box2','box3','box4'])" class="boxlink" id="boxlink1" style="display:none;">box 1</a></p>
<div id="box1"> 
<p>Text of box 1</p> 
</div>

<a href="#" onclick="show(['box2','boxlink1','boxlink3','boxlink4']); hide(['boxlink2','box1','box3','box4'])" class="boxlink" id="boxlink2">box 2</a></p>
<div id="box2" style="display:none;"> 
<p>Text of box 2</p> 
</div>

<a href="#" onclick="show(['box3','boxlink1','boxlink2','boxlink4']); hide(['boxlink3','box1','box2','box4'])" class="boxlink" id="boxlink3">box 3</a></p>
<div id="box3" style="display:none;"> 
<p>Text of box 3</p> 
</div>

<a href="#" onclick="show(['box4','boxlink1','boxlink2','boxlink3']); hide(['boxlink4','box1','box2','box3'])" class="boxlink" id="boxlink4">box 4</a></p>
<div id="box4" style="display:none;"> 
<p>Text of box 4 </p> 
</div>

</body>
</html>

Which causes NOTHING to work. I'm guessing I have some syntax wrong or something, but I'm not sure what it is. I tried it a few different ways. I've seen multiple things called that way before.

If anyone can help me, I'm guessing it's a pretty simple solution. Thanks in advance.

I found something similar to this code somewhere and started with it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript"> 
function show( id ) { 
document.getElementById(id).style.display = 'block'; 
} 
function hide( id ) { 
document.getElementById(id).style.display = 'none'; 
} 
</script> 
</head>

<body>

<a href="#" onclick="show('box1'); hide('boxlink1')" class="boxlink" id="boxlink1" style="display:none;">box 1</a></p>
<div id="box1"> 
<p>Text of box 1</p> 
</div>

<a href="#" onclick="show('box2'); hide('boxlink2')" class="boxlink" id="boxlink2">box 2</a></p>
<div id="box2" style="display:none;"> 
<p>Text of box 2</p> 
</div>

<a href="#" onclick="show('box3'); hide('boxlink3')" class="boxlink" id="boxlink3">box 3</a></p>
<div id="box3" style="display:none;"> 
<p>Text of box 3</p> 
</div>

<a href="#" onclick="show('box4'); hide('boxlink4')" class="boxlink" id="boxlink4">box 4</a></p>
<div id="box4" style="display:none;"> 
<p>Text of box 4 </p> 
</div>

</body>
</html>

Great. This already does MOST of what I want it to do, except that I want it to re-show the hidden box titles when you click on a new box title, and hide the content of any box that is open.

So I tried this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript"> 
function show( id ) { 
document.getElementById(id).style.display = 'block'; 
} 
function hide( id ) { 
document.getElementById(id).style.display = 'none'; 
} 
</script> 
</head>

<body>

<a href="#" onclick="show(['box1','boxlink2','boxlink3','boxlink4']); hide(['boxlink1','box2','box3','box4'])" class="boxlink" id="boxlink1" style="display:none;">box 1</a></p>
<div id="box1"> 
<p>Text of box 1</p> 
</div>

<a href="#" onclick="show(['box2','boxlink1','boxlink3','boxlink4']); hide(['boxlink2','box1','box3','box4'])" class="boxlink" id="boxlink2">box 2</a></p>
<div id="box2" style="display:none;"> 
<p>Text of box 2</p> 
</div>

<a href="#" onclick="show(['box3','boxlink1','boxlink2','boxlink4']); hide(['boxlink3','box1','box2','box4'])" class="boxlink" id="boxlink3">box 3</a></p>
<div id="box3" style="display:none;"> 
<p>Text of box 3</p> 
</div>

<a href="#" onclick="show(['box4','boxlink1','boxlink2','boxlink3']); hide(['boxlink4','box1','box2','box3'])" class="boxlink" id="boxlink4">box 4</a></p>
<div id="box4" style="display:none;"> 
<p>Text of box 4 </p> 
</div>

</body>
</html>

Which causes NOTHING to work. I'm guessing I have some syntax wrong or something, but I'm not sure what it is. I tried it a few different ways. I've seen multiple things called that way before.

If anyone can help me, I'm guessing it's a pretty simple solution. Thanks in advance.

Share Improve this question asked May 4, 2011 at 18:52 Adam 111 gold badge1 silver badge2 bronze badges

document.getElementById expects a string as parameter, but you are passing an array. You have to loop over the array. – Felix Kling Commented May 4, 2011 at 18:55

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

Your show and hide functions are not designed to handle arrays of variables. You will need to cycle through an array that you feed to the function and hide/show each element in it.

So your show function will look something like this:

function show(ids) {
    for(var i=0, l=ids.length; i < l; i++ } {
         document.getElementById(ids[i]).style.display = 'block'; 
    } 
}

You are passing arrays to your functions and they are being processed as strings. I just changed that, and leveraged jQuery language instead of the lengthy JavaScript language. See a working Sample.

function show( id ) { 
    for (var x=0; x<id.length; x++)
        $('#' + id[x]).show(); 
} 
function hide( id ) { 
    for (var x=0; x<id.length; x++)
        $('#' + id[x]).hide(); 
}

UPDATE

my bad. Could have sworn I saw a jQuery tag.

function show( ids ) { 

   foreach (id in ids){

      document.getElementById(id).style.display = 'block'; 
   }
}


function hide( ids ) { 
   foreach (id in ids){
      document.getElementById(id).style.display = 'none'; 
   }
}

Programmer puzzle solving

javascript - Showhide specific divs - Stack Overflow

3 Answers 3

Articles related to this article

comment list (0)