Hiding and Showing Elements with Javascript

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>

Did you like this post? Get monthly summary of our new tutorials, posts and tips to your inbox!

No Responses

Post Your Comment

Your email address will not be published.