jQuery Show And Hide

Question

I am making a simple show function and if a user clicks any where else on the page the show turns into a hide. That worked until i added another show and hide function. I want it so when a user triggers to show a div the div that is open closes and then the div they want to open opens. Right now they both open. Here is the code: Jsfiddle:http://jsfiddle.net/hBb9L/19/

 $("#e").click(function (e) {

    $("#s").show(200);
    e.stopPropagation();


    $("body").click(function (e) {
        if (!$(e.target).hasClass('popu')) {


            $("#s").hide(200);

        }
    });
});

 $("#er").click(function (er) {

    $("#u").show(200);
    er.stopPropagation();


    $("body").click(function (er) {
        if (!$(er.target).hasClass('popu')) {


            $("#u").hide(200);

        }
    });
});

Answer 1

Try this,

$("#s").hide(0);
$("#u").hide(0);

$(document).click(function (e) {
    if (!$(e.target).hasClass('popu')) {
        $("#s,#u").hide(200);
    }
});
$("#e").click(function (e) {
    $("#s").show(200);
    e.stopPropagation();
});

$("#er").click(function (er) {
    $("#u").show(200);
    er.stopPropagation();
});

Demo