Question

I’m kinda new to coding with jQuery / JavaScript. I’ve managed to write the code below but I think there is a much easier way to write it down. Is there somebody who can show me how?

$(document).ready(function(){
$(".btn_home").click(function(){
$("#article1").fadeIn();
$("#article2").fadeOut();
$("#article3").fadeOut();
$("#article4").fadeOut();

$("#blended").fadeOut();
$("#contact").fadeOut();
});

$(".btn_prt").click(function(){
$("#article1").fadeOut();
$("#article2").fadeIn();
$("#article3").fadeOut();
$("#article4").fadeOut();


$("#over").fadeIn();
$("#blended").fadeOut();
$("#contact").fadeOut();
});

$(".btn_blog").click(function(){
$("#article1").fadeOut();
$("#article2").fadeOut();
$("#article3").fadeIn();
$("#article4").fadeOut();

$("#over").fadeOut();
$("#blended").fadeIn();
$("#contact").fadeOut();
});

$(".btn_abt").click(function(){
$("#article1").fadeOut();
$("#article2").fadeOut();
$("#article3").fadeOut();
$("#article4").fadeIn();

$("#over").fadeOut();
$("#blended").fadeOut();
$("#contact").fadeIn();
}); 
});

Answer 1

The problem here is code duplication. You need to use a function with a parameter to help with that.

$(document).ready(function() {
    $(".btn_prt").click(function(){
        fadeAllBut("#article2, #over");
    });

    $(".btn_blog").click(function(){
        fadeAllBut("#article3, #blended");
    });

    $(".btn_abt").click(function(){
        fadeAllBut("#article4, #contact");
    }); 
});

function fadeAllBut(itemsToFadeIn) {
    $(".fades").fadeOut();
    $(itemsToFadeIn).stop().fadeIn();
}

Of course, you would need to give the CSS class fades to all the items you would like to fade in or out.