Creating a Menu System that Hides and Shows Divs and Sections

Hi,

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>
<html>
	<head>
		<title>Hide and Show Divs</title>
		<script
		  src="https://code.jquery.com/jquery-3.3.1.min.js"
		  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
		  crossorigin="anonymous"></script>
		<style>
			.sections{
				background-color : blue;
				color: white;
				padding: 10px;
				margin: 10px;
				display: none;
			}
		</style>
	</head>
	<body>
		<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>
		<div class="sections">
			<h3>Section Two</h3>
			<p>This is section two div.</p>
		</div>
		<div class="sections">
			<h3>Section Three</h3>
			<p>This is section three div.</p>
		</div>
		<script>
			show(1);
			function show(x){
				x -= 1;
				$(".sections").hide();
				$(".sections:eq("+x+")").slideDown();
			}
		</script>
	</body>
</html>

Leave a Reply

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