Currently, I am enrolled in a beginner HTML/CSS/JS course where our initial task is to create a personal website. The requirement is to incorporate a horizontal menu that reveals specific information when clicked. For instance, selecting "description" should unveil a brief paragraph detailing about ourselves. After conducting some research, it appears that JQuery might be the solution, however, it seems premature for us to know or use it at this stage. Is there an alternative approach that I'm missing?
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Jeremy Ortiz</title>
<div id="header">
<h1>A Little About Jeremy Ortiz</h1>
</div>
</head>
<body>
<img src="hwpic.jpg" alt="Me">
<div id="content">
<div id="nav">
<h2>Navigation</h2>
<ul>
<li><a class="selected" href="">Description</a></li>
<li><a href="">A form</a></li>
<li><a href="">Course List</a></li>
<li><a href="">Table</a></li>
<li><a href="">Contact Information</a></li>
</ul>
</div>
</body>
</html>
#header {
padding: 10px;
background-color: #6CF;
color: white;
text-align: center;
}
img {
position: absolute;
right: 7px;
bottom: 148px;
z-index: -1;
}
#content {
padding: 10px;
}
#nav {
width: 180px;
float: left;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}