Using javascript to fade out elements when one is clicked?

Question

Im using java to make divs fade in and out when clicked on.

How would i make the three other functions fade out when one is clicked on while fading the clicked on fucntion in?

Heres the code so far;

$(document).ready(function() {

$('#about').click(function(about){    
$('#outside, #outside2, #outside3, #outside4, #outside5, #outside6, #outside7, #outside8, #outside9, #outside10, #outside11').fadeToggle('slow');
});

$('#whyus').click(function(whyus){    
$('#outsidewhy, #outsidewhy2, #outsidewhy3, #outsidewhy4, #outsidewhy5, #outsidewhy6, #outsidewhy7, #outsidewhy8, #outsidewhy9, #outsidewhy10, #outsidewhy11').fadeToggle('slow');
});

$('#portfolio').click(function(port){    
$('#outsideport, #outsideport2, #outsideport3, #outsideport4, #outsideport5, #outsideport6, #outsideport7, #outsideport8, #outsideport9, #outsideport10, #outsideport11').fadeToggle('slow');
});

$('#contact').click(function(con){    
$('#outsidecon, #outsidecon2, #outsidecon3, #outsidecon4, #outsidecon5, #outsidecon6, #outsidecon7, #outsidecon8, #outsidecon9, #outsidecon10, #outsidecon11').fadeToggle('slow');
});


}); 

For example when function con is clicked on it should fade out function about, whyus and port while fading con in.

Another example, function about is clicked on it would fade out functions whyus, port and con while fading in about which is being clicked on.

Answer 1

Firstly, don't be afraid of using classes.

For example, give every single sub-item a class of class="outside"

Then, also give a unique class to each of the 4 functions items. For example, give your #outside, #outside2, #outside3.... all a class of class="outside1"

and your #outsidewhy, #outsidewhy2 ... all a class of class="oustside2"

Then give all your top level click links a class of class="click-link"

Then all you need to do is

$('.click-link').click(function() {

    var whichone = $(this).attr('id'); // gets the id of the click-link that was clicked

    $('.outside').fadeOut(800); // this fades out them all

    if (whichone === 'about') {

        $('.outside1').fadeIn(800); // but this will fadein the ones that you want, depending on which link was clicked

    }

    else if (whichone === 'whyus') {

        $('.outside2').fadeIn(800);

    }

    etc

    etc

});

Answer 2

Working fiddle

Far from perfect answer, improvements will be strongly appreciated

---

jQuery

$(document).ready(function () {
    $('#about').click(function (e) {
        e.preventDefault();
        $('.notme').not('#outside').fadeOut('fast');
        $('#outside').fadeIn('slow');
    });
    $('#whyus').click(function (e) {
        e.preventDefault();
        $('.notme').not('#outsidewhy').fadeOut('fast');
        $('#outsidewhy').fadeIn('slow');
    });
    $('#portfolio').click(function (e) {
        e.preventDefault();
        $('.notme').not('#outsideport').fadeOut('fast');
        $('#outsideport').fadeIn('slow');
    });
    $('#contact').click(function (e) {
        e.preventDefault();
        $('.notme').not('#outsidecon').fadeOut('fast');
        $('#outsidecon').fadeIn('slow');
    });
});