This is a quick tutorial to explain how you can easily show and hide page elements with javascript.
To begin with, each item that you want to hide/show should have a unique HTML ID. Let’s begin with a very simple HTML page.
<h1>This is my title</h1> <div id="content"> <h2>Div1 Follows</h2> <div id="div1"> This is where my first div will be. </div> <h2>Div2 Follows</h2> <div id="div2"> This is where my second div will be. </div> </div>
We will then write a function that will hide all of the appropriate divs (in this case, div1 and div2).
function hideAll() {
var myDivs = Array('div1','div2') // Add each div ID to this array
for(var i in myDivs) {
if(document.getElementById(myDivs[i]) {
document.getElementById(myDivs[i]).style.display = 'none';
}
}
}
That function, when called, will hide all of the divs that are included in the “myDivs” array. However, we need a way to show the appropriate divs again, so we are going to modify the function slightly to insert a new link where the div should be.
function hideAll() {
var myDivs = Array('div1','div2') // Add each div ID to this array
for(var i in myDivs) {
if(document.getElementById(myDivs[i])) {
document.getElementById(myDivs[i]).style.display = 'none';
if(!document.getElementById('linkto_'+myDivs[i])) {
var myLink = document.createElement('a');
myLink.id = 'linkto_'+myDivs[i];
myLink.href = '#'+myDivs[i];
myLink.onclick = function() {
showDiv(this.href);
//return false; //uncomment this line and comment or remove the next line if you don't want the page to jump to the revealed div when the link is clicked
return true;
};
myLink.appendChild(document.createTextNode('Expand this entry'));
document.getElementById(myDivs[i]).parentNode.insertBefore(myLink,document.getElementById(myDivs[i]).nextSibling);
}
}
}
}
Now that we’ve inserted links that will show the divs, we need to actually write the function that’s going to reveal the div when the link is clicked.
function showDiv(what) {
hideAll(); // Comment this line out if you don't want the rest of the divs to be hidden when you reveal a new one
what = what.split('#'); // If our div name/ID includes the hash symbol, we'll split it at that point
what = what.pop(); // The function above turned our div name/ID into an array. This will grab the last element of the array
if(document.getElementById(what)) {
document.getElementById(what).style.display = '';
if(document.getElementById('linkto_'+what)) {
document.getElementById('linkto_'+what).parentNode.removeChild(document.getElementById('linkto_'+what));
}
}
}
Now, we’ll put these two functions together at the very bottom of our document (just above the closing body tag) and will then call the appropriate functions. I’ve also added a little bit of script that will check to see if someone loaded the page trying to access a specific div, and will show that div if so. Therefore, the entire body section of our HTML page will look like:
<body>
<h1>This is my title</h1>
<div id="content">
<h2>Div1 Follows</h2>
<div id="div1">
This is where my first div will be.
</div>
<h2>Div2 Follows</h2>
<div id="div2">
This is where my second div will be.
</div>
</div>
<script type="text/javascript">
function hideAll() {
var myDivs = Array('div1','div2') // Add each div ID to this array
for(var i in myDivs) {
if(document.getElementById(myDivs[i])) {
document.getElementById(myDivs[i]).style.display = 'none';
if(!document.getElementById('linkto_'+myDivs[i])) {
var myLink = document.createElement('a');
myLink.id = 'linkto_'+myDivs[i];
myLink.href = '#'+myDivs[i];
myLink.onclick = function() {
showDiv(this.href);
//return false; //uncomment this line and comment or remove the next line if you don't want the page to jump to the revealed div when the link is clicked
return true;
};
myLink.appendChild(document.createTextNode('Expand this entry'));
document.getElementById(myDivs[i]).parentNode.insertBefore(myLink,document.getElementById(myDivs[i]).nextSibling);
}
}
}
}
function showDiv(what) {
hideAll(); // Comment this line out if you don't want the rest of the divs to be hidden when you reveal a new one
what = what.split('#'); // If our div name/ID includes the hash symbol, we'll split it at that point
what = what.pop(); // The function above turned our div name/ID into an array. This will grab the last element of the array
if(document.getElementById(what)) {
document.getElementById(what).style.display = '';
if(document.getElementById('linkto_'+what)) {
document.getElementById('linkto_'+what).parentNode.removeChild(document.getElementById('linkto_'+what));
}
}
}
hideAll();
if(window.location.hash) {
showDiv(window.location.hash);
}
</script>
</body>