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>