Here are some clickable links:
- About
- Portfolio
- Resume
Upon clicking 'About', I want the About section to appear while hiding the Portfolio and Resume sections (and vice versa)...
This is how my code is structured (relevant parts only):
HTML:
<section id="attCatch">
<div class="container_12">
<h1 class="attCatchText">The name's Jake. I like to make things.</h1>
<nav id="topMainNav">
<ul>
<li><a href="#" title="#" class="aboutLink">About</a></li>
<li><a href="#" title="#" class="portfolioLink">Portfolio</a></li>
<li><a href="#" title="#" class="resumeLink">Resume</a></li>
</ul>
</nav>
</div>
</section>
<section id="contentLoader">
<div class="container_12">
<section class="mn_pages">
<article class="about_page">
<h1>About stuff</h1>
</article>
<article class="portfolio_page">
<h1>Portfolio stuff</h1>
</article>
<article class="resume_page">
<h1>Resume stuff</h1>
</article>
</section>
</div>
</section>
jQuery:
$(document).ready(function(){
$('.mn_pages').hide();
var i = 0;
$('.topMainNav').each(function(){
$(this).click(function(){
$('.mn_pages:eq('+$(this).data('idf')+')').toggle('slow');
});
$(this).data('idf',i);
i++;
});
});
Although I expected my jQuery code to function correctly, it did not work as intended.
Link to JS fiddle: http://jsfiddle.net/MsYdJ/