I am currently working on my main menu layout in HTML, and here is the code snippet:
<div id="main-container">
<div id="main-wrapper">
<div id="logo">
<h1 id="title">portfolio</h1>
<h2 id="ready">ready</h2>
</div>
<div id="selection">
<ul>
<li><a href="#" id="about">about</a></li>
<li><a href="#" id="resume">resume</a></li>
<li><a href="#" id="portfolio">portfolio</a></li>
<li><a href="#" id="contact">contact</a></li>
</ul>
</div>
</div>
</div>
I have a vision of adding some cool animations to my website. For instance, when the "about" link is clicked, I want a specific div to be displayed. Here is the div I'm referring to:
<div id="secondary-container">
<div id="about-wrapper">
<div id="header">
<h1 id="about-heading">about</h1>
</div>
<div id="information">
<h2 id="introduction">introduction:</h2>
<p id="paragraph">hello! welcome to my website!</p>
</div>
<div id="content">
<h2 id="my-information">my information:</h2>
<ul>
<li>name: <span>danny moon</span></li>
<li>age: <span>21</span></li>
<li>sex: <span>male</span></li>
<li>location: <span>new jersey</span></li>
</ul>
</div>
<div id="feature">
<h2 id="my-skills">my skills: </h2>
<ul>
<li>html: <span>50%</span></li>
<li>css: <span>50%</span></li>
<li>javascript: <span>30%</span></li>
<li>python: <span>60%</span></li>
</ul>
</div>
</div>
</div>
Currently, my jQuery code is quite basic:
$(document).ready(function(){
$('#about').click(function(){
$('#secondary-container').show();
});
});However, upon clicking the "about" link, nothing seems to happen. Any suggestions or advice would be greatly appreciated. If you require access to my full HTML, CSS, jQuery, or JavaScript folders, you can find them in this Dropbox link:
Thank you for your help.