Why does my Javascript toggle two elements simultaneously?

I have two hidden DIVs on my page with buttons to toggle them when needed. One is the navigation menu and the other is a log-in form. I’ve used JQuery to toggle a nice slide down and up. I’ve now added some JavaScript to toggle the slide out when a user clicks on their respective buttons a second time or if they click outside of the revealed DIV.

Problem is, my JavaScript toggles both DIVs to appear and disappear together, regardless of which button you press!

    $('html').click(function (e) {
    if (e.target.id == '#nav_btn') {
    $("#navigation").slideToggle("slow");
    } else {
    $("#navigation").slideToggle("slow");
    }
});

$('html').click(function (e) {
    if (e.target.id == '#log_btn') {
    $("#loginDIV").slideToggle("slow");
    } else {
    $("#loginDIV").slideToggle("slow");
    }
});

It’s no doubt something really obvious but what am I doing wrong?!