I have a navigation bar that when the list elements are clicked their respective body container appears and the other body containers disappear.
navigation
<ul>
<li><a id="home" href="#"><img src="img/home-icon.png" alt="Home">HOME</a></li>
<li><a id="about" href="#"><img src="img/about-icon.png" alt="Home">ABOUT</a></li>
<li><a id="projects" href="#"><img src="img/projects-icon.png" alt="Home">PROJECTS</a></li>
<li><a id="contact" href="#"><img src="img/contact-icon.png" alt="Home">CONTACT</a></li>
</ul>
body containers:
<div id="homeBodyContainer">home</div>
<div id="aboutBodyContainer">about</div>
<div id="projectsBodyContainer">projects</div>
<div id="contactBodyContainer">contact</div>
JQuery:
$(document).ready(function () {
$("#home").click(function(){
event.preventDefault();
$("#aboutBodyContainer").hide();
$("#projectsBodyContainer").hide();
$("#contactBodyContainer").hide();
$("#homeBodyContainer").fadeIn(1500);
});
$("#about").click(function(){
event.preventDefault();
$("#homeBodyContainer").hide();
$("#projectsBodyContainer").hide();
$("#contactBodyContainer").hide();
$("#aboutBodyContainer").fadeIn(1500);
});
$("#projects").click(function(){
event.preventDefault();
$("#homeBodyContainer").hide();
$("#aboutBodyContainer").hide();
$("#contactBodyContainer").hide();
$("#projectsBodyContainer").fadeIn(1500);
});
$("#contact").click(function(){
event.preventDefault();
$("#homeBodyContainer").hide();
$("#projectsBodyContainer").hide();
$("#aboutBodyContainer").hide();
$("#contactBodyContainer").fadeIn(1500);
});
});
As you can see the functions are almost identical. Is there a way I can reduce the amount of code here?