Creating a Menu System that Hides and Shows Divs and Sections


This is a short tutorial about creating simple menu system that if you click a menu item, it will show a div and hide another divs.

With using this system you can make a single page web app nicely.

Watch the video here:

And here is the source code:

<!DOCTYPE html>
		<title>Hide and Show Divs</title>
				background-color : blue;
				color: white;
				padding: 10px;
				margin: 10px;
				display: none;
		<div style="text-align: center"><a href="#" onclick="show(1)">One</a> | <a href="#" onclick="show(2)">Two</a> | <a href="#" onclick="show(3)">Three</a></div>
		<div class="sections">
			<h3>Section One</h3>
			<p>This is section one div.</p>
		<div class="sections">
			<h3>Section Two</h3>
			<p>This is section two div.</p>
		<div class="sections">
			<h3>Section Three</h3>
			<p>This is section three div.</p>
			function show(x){
				x -= 1;

Leave a Reply

Your email address will not be published. Required fields are marked *