Image

Imagejehoshabeath wrote in Imagejavascript 😃happy

Listens: Holst's The Planets

Show/Hide Elements Question

Hello everyone,
I have been stuck on a JavaScript question and hoped someone here might have an answer.

Here is my situation:
I am currently designing a webpage that will have hide/show elements. The idea is to list names along the left-hand side, and when one clicks the name, to have the corresponding biographical information appear in a section to the right. I found code for this from an online tutorial.


<html>
<head>
<title>Quick One Page Information</title>

<script type="text/javascript">
var current = "1";
function pageSwitch(id){
    if(!document.getElementById) return false;
    var div = document.getElementById("page"+id);
    var curDiv = document.getElementById("page"+current);
    curDiv.style.display = "none";
    div.style.display = "block";
    current = id;
}
</script>
</head>


<body>
<!--layout-->
<div id="layout">

<!--navigation-->
<ul id="navigation">

<li><a href="#" onclick="pageSwitch(1); return false;">Page 1</a></li>
<li><a href="#" onclick="pageSwitch(2); return false;">Page 2</a></li>
<li><a href="#" onclick="pageSwitch(3); return false;">Page 3</a></li>
</ul>
<!--/navigation-->

<!--information-->
<div id="information">

<div id="page1">
<h2>Page 1</h2>
<p>This is some content for page 1. It's cool.</p>

</div>

<div id="page2">
<h2>Page 2</h2>
<p>This is some content for page 2. It's cooler.</p>
</div>

<div id="page3">
<h2>Page 3</h2>
<p>This is some content for page 3. It's coolest.</p>
</div>

<script type="text/javascript">
var divs = document.getElementById("information").getElementsByTagName("div");
for(i = 0; i < divs.length; i++){
    divs[i].style.display = "none";
}
document.getElementById("page1").style.display = "block";

</script>

</div>
<!--/information-->

</div>
<!--/layout-->
</body>
</html>



The problem comes when I want to create a link on a separate webpage to a specific element. In other words, I would like to create a link elsewhere on the web that will load the webpage with the desired biographical information showing. I could not figure out a way to do this.
Does anyone have any suggestions for a way to create this kind of link? Or would there be better code to use for this purpose?
Thank you for your time! :)