0

i want to show and hide some element based on click. i have two button , when you click one of the button it will show a form and if you click the other button it'll show another form. now what i want if someone has clicked the button it'll show the form and then if he click somewhere else that form should be hidden. i did he first part by following code

$(document).ready(function(){
    $("#login_btn").click(function(){
      $("#login_form").toggleClass("hide");
      $("#signup_form").addClass("hide");
    });
    $("#signup_btn").click(function(){
      $("#signup_form").toggleClass("hide");
      $("#login_form").addClass("hide");
    });
    $(".container > :not(#login_btn)").click(function(){
      $("#signup_form").addClass("hide");
      $("#login_form").addClass("hide");
    });
  });

now i want to hide those form when clicked somewhere else. I tried with $('body > :not('#login_form,#signup_form'), but it also disable the button's activity,when i click the button it doesn't show the form. I already searched similar question in stackoverflow and other places but none of the solution worked. so anybody know how to do this?

1

1 Answer 1

2

You can hide any elements by doing a quick search for where you clicked. What thou want to know is: have I clicked in the document? Have I clicked on the button? Otherwise, have I clicked on a form? If I clicked on a form, then don't close it. If I clicked outside a form, close the form.

$(document).click(function(event){
    var target = $(event.target);
    /* if the target is a button, don't continue as we want to keep its click */
    if(target.attr("id") === "login_btn" || target.attr("id") === "signup_btn"){
        return;
    }
    /* lets see if the target, or any of its parents, has the form id we are looking for */
    /* if it doesn't, hide that form */
    if(!target.closest("#login_form").length){
        $("#login_form").hide();
    }
    if(!target.closest("#signup_form").length){
        $("#signup_form").hide();
    }
});

Update

Sorry, the click should be on the document and the IDs I used were incorrect. All form-ids are now using underscore instead of dashes (i.e. login_form). I also used a wrong id in the third if, pointing to the login form while I was checking the signup_form. I've amended, tried and it does work.

4
  • it didn't work, clicking other then the two button doesn't hide the form Oct 15, 2014 at 14:45
  • Sorry some typos have made this non-functional but it is amended now. Oct 15, 2014 at 14:55
  • it worked,but still have problem, when you first visit the page and the click the button it shows the form and if you click somewhere else it disappear but then if you click again the button it doesn't show the form again.what to do now? Oct 15, 2014 at 15:02
  • I have used the jQuery hide() and show() function where you added a class 'hide'. Either replace you addClass("hide") with show() or replace my hide() with removeClass("hide"). Now that I mention it, though, could the mistake in your original code perhaps be that you are also using addClass("hide") when you are actually showing the forms? Maybe you could use removeClass("hide") there... Oct 15, 2014 at 15:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.