Menu
My goal is to be able to have a page with multiple hidden DIVs. On click of a link, a single DIV (box) should appear. Now, either on second click of that link, it should close OR on click of another link the first DIV should close and the second should open. At any one time, only one DIV (box) should be visible with the option to close DIVs by clicking a second time on the open link.
I have only been able to get 2/3 the way there. I am able to click on a link and open it, click a second link which closes the first and opens the second, but I don’t know how to close the last open link so that no DIVs are shown, as when the page originally loaded.
I hope this is not as confusing as it sounds when I read it back….here is my example code:
<html>
<head>
<title>Hide DIV Test Run</title>
<script language=”javascript”>
function show(selected) {
var openDiv = document.getElementsByTagName(“div”);
for(var x=0; x<openDiv.length; x++) {
name = openDiv[x].getAttribute(“name”);
if (name == ‘openDiv’) {
if (openDiv[x].id == selected) {
openDiv[x].style.display = ‘block’;
}
else {
openDiv[x].style.display = ‘none’;
}
}
}
}
</script>
<style>
body {
width:50%;
}
#openDiv1 {
display:none;
border:solid 2px black;
width:200px;
}
#openDiv2 {
display:none;
border:solid 2px black;
width:200px;
}
</style>
</head>
<body>
<div id=”body”>
<p>This is <a href=”#” id=”link1″ onclick=”show(‘openDiv1’)”>some</a> test text. Sentence #1.
<div name=”openDiv” ID=”openDiv1″>This is the hidden text.</div>
<p>This is even <a href=”#” id=”link2″ onclick=”show(‘openDiv2’)”>more</a> text. Sentence #2
<div name=”openDiv” ID=”openDiv2″>This is more hidden text.</div>
</div>
</body>
</html>
I appreciate the feedback,
Kevin