JS & jQuery function that hides some DIVs on click

Question

I have a div navigation, inside this div is a div login. I use javascript that displays divs login_name_field, login_pw_field, register_btn, do_login_btn, hide_login and hides the div login when I click the login div.

The hide_login div, when clicked hides all the newly displayed divs including itself and displays the original login div. It all works like a charm, but I would like to have one more function that does the same as hide_login but is triggered by clicking anywhere outside the main navigation div. I tried to adjust my code, but I am getting is not defined error on the new clicked vars.

Please have a look at the code below. Thank you all for reading and in advance for the replies :) Have a nice holiday.

    $( "#login_btn" ).click(function() {
    
                        $('#login_name_field').toggle()
                        $('#login_pw_field').toggle()
                        $('#register_btn').toggle()
                        $('#login_btn').toggle()
                        $('#do_login_btn').toggle()
                        $('#hide_login').toggle()
                        var loginClicked = 1;
    });

    $( "#hide_login" ).click(function() {
    
                        $('#login_name_field').toggle()
                        $('#login_pw_field').toggle()
                        $('#register_btn').toggle()
                        $('#login_btn').toggle()
                        $('#do_login_btn').toggle()
                        $('#hide_login').toggle()
                        var loginClicked = 0;
    });

    $( "#navigation_bar" ).not().click(function() {
        if(loginClicked == 1){
            $( "#hide_login" ).click();
        }
    });

    <div id="navigation_bar">
    
      <!-- DO Login BTN -> runs the login function -->              
      <div id="do_login_btn" class="do_button" style="display: none;">
        <input type="submit" id="nav_btn" name="whatever" value="Log In!">
      </div> 
                                    
      <!-- Hide Login BTN -->
        <div id="hide_login" class="hide_button" style="display: none;">
      </div>            
                                    
      <!-- Login PW field -> input for login query -->
      <div id="login_pw_field" class="button" style="display: none;">
        <div id="field_div">
          <input type="password" name="login_pw_field" value="password" class="p_reset" id="password">
        </div>
      </div>
                        
      <!-- Login NAME/Email field -> input for login query -->
      <div id="login_name_field" class="button" style="display: none;">
        <div id="field_div">
          <input type="text" class="n_reset" name="login_name_field" id="name" value="Name / Email"></input>
        </div>
      </div>
                               
      <!-- Register BTN -> forwards to Account Recovery Page -->
      <div id="acc_rec_btn" class="button" style="display: none;">
        <p id="center">Account Recovery</p>
      </div>
                                
      <!-- Login BTN -> displays Login NAME & PW fields, DO Login BTN, Register BTN -->                 
      <div id="login_btn" class="button" style="display: block;">
        <p id="center">Log In</p>
      </div>
    </div>

Also it appears that the $( "#navigation_bar" ).not().click(function() only triggers when I am clicking inside the navigation_bat div instead of outside of it. I thought the not() takes care of that. Well, let me know what you think :)

Aside: if you're applying the same action to several elements, just select them all `$('#login_name_field, #login_pw_field, etc').toggle()`. Your understanding of not is not what you think. http://api.jquery.com/not-selector/ — Popnoodles, Dec 25 '13 at 16:54
Added the code ;) Also, thank you for the multi select idea. — , Dec 25 '13 at 16:59
I am staring at the documentation and I can't seem to figure out how to rewrite the code to do the intended. Should it be `not($( "#navigation_bar" )).click(function()` ?? — , Dec 25 '13 at 17:03
not will filter out elements, so you need something selected to filter. — Popnoodles, Dec 25 '13 at 17:07
Maybe this would help you http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — udit bansal, Dec 25 '13 at 17:09
yeah so I want this function to run whenever I click anywhere outside the `navigation_bar` div. So isn't what I wrote correct? — , Dec 25 '13 at 17:10
@uditbansal Wooow. It works! I have to adjust it a little but it works perfect. Posted the solution above. Tagged the question solved. If you want the accepted answer feel free to post an actual answer since I can't accept the comment :(. But thank you. — , Dec 25 '13 at 17:17
@james: do not do "Posted the solution above. Tagged the question solved". Just answer your own question bellow, and then accept own answer when SO will allow so. — Marcin Orlowski, Dec 25 '13 at 17:27
Awwww, that's how you're supposed to do it? I am sorry. I don't really want to redo the whole question above now. I promise I'll do it right next time, ok? Promise! — , Dec 25 '13 at 17:30
You can copy-paste the answer to an actual answer and then [roll back](http://stackoverflow.com/posts/20774902/revisions) to the previous version of the question. Takes maybe 20 seconds. — JJJ, Dec 25 '13 at 17:33

score 0 · Answer 1 · answered Dec 25 '13 at 17:45

According to your advices I have the code working now and it looks like this:

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

    $('#login_name_field, #login_pw_field, #register_btn, #login_btn, #do_login_btn, #hide_login').toggle()

});

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

    $('#login_name_field, #login_pw_field, #register_btn, #acc_rec_btn, #login_btn, #do_login_btn, #hide_login').css("display", "none")
$('#login_btn').css("display", "block");
});

    $(document).mouseup(function (e)
{
    var container = $("#navigation_bar");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $( "#hide_login" ).click();
    }
});

I have also adjusted the hide_login function. The way it was implemented before with the new solution when I kept clicking outside the navigation_bar div it keep displaying and hiding the elements instead just hiding them when they are already displayed. Now it works perfectly.

JS & jQuery function that hides some DIVs on click

1 Answers1