jQuery click handlers to show one of four containers

Question

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?

Answer 1

Here you can write a simple logic to identify container div on the basis of anchor id.

Please see below code:

put class="container" for all container div, like below :

<div id="homeBodyContainer" class="container">home</div>
<div id="aboutBodyContainer" class="container">about</div>
<div id="projectsBodyContainer" class="container">projects</div>
<div id="contactBodyContainer" class="container">contact</div>

And jQuery is :

$(document).ready(function () {
    $("li a").click(function(){
        event.preventDefault();
        // hide all container div
        $(".container").hide();

        // get id of clicked anchor and create its corresponding container id
        var anchorId = $(this).attr('id');
        var containerId = anchorId+"BodyContainer";
        $("#"+containerId).fadeIn(1500);
    });

});

Note : It would be better idea to assign same class to anchor, so that if you have some other anchor available in your HTML then also you can easily bind click event to all desired anchor.

Example:

Assign class="anchorToClick" to all desired anchor tags

and jQuery will be like

$(document).ready(function () {
        $(".anchorToClick").click(function(){
            // your stuff here
          });

    });

Answer 2

You could put one event on all the anchor tags and determine which one is clicked inside the function then show the container.

$(document).ready(function(){
    $('#nav li a').click(function(){
        event.preventDefault();
        $("#aboutBodyContainer").hide();
        $("#projectsBodyContainer").hide();
        $("#contactBodyContainer").hide();
        $("#homeBodyContainer").hide();

        var clicked = $(this).attr('id');
        switch(clicked){
            case 'home':
                $("#homeBodyContainer").fadeIn(1500);
                break;
            case 'about':
                $("#aboutBodyContainer").fadeIn(1500);
                break;
            case 'projects':
                $("#projectsBodyContainer").fadeIn(1500);
                break;
            case 'contact':
                $("#contactBodyContainer").fadeIn(1500);
                break;
        }
    });
});

To make sure that you dont attach this event to any other elements, add an id to the <ul> like so.

<ul id="nav">
    <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>