Troubles when closing div by clicking outside it

Question

I am working on creating a website and I am stuck on a certain function I am trying to build. I am trying to slide back a div to its original place if anyplace outside the div is clicked. I've looked everywhere on stack but to no avail. What happens to me is that the background clicks remain active at all times, I only need it to be active when the div has slid to become sort of a popup.

Here is my jsfiddle: https://jsfiddle.net/DTcHh/10567/

Here is the jquery for one of the divs (the rest are similar)

var text = 1;

$('.login1').click(function(e){
    e.preventDefault();

    $('.loginform_hidden').toggleClass('loginform_visible');
    $(".animateSlide").toggle(300, function(){
        $(this).focus();
    });

    if(text == 1){
        $(".div1").toggleClass("animateSlide col-xs-12");
        $('.login1').html('Go Back');
        $('.imageOne').toggleClass('animateSlideTop');
        // If an event gets to the body
        $('.div2, .div3, .patientAccess').toggle("fast");

document.addEventListener('mouseup', function(event){
    var box = document.getElementsByClassName('animateSlide');
    if (event.target != box && event.target.parentNode != box){
         $('.div2, .div3, .patientAccess').toggle("fast");
         $(".div1").toggleClass("animateSlide ");
      text=0;
    }
            });

        text = 0;
    } else {
        $(".div1").toggleClass("animateSlide");
        $('.login1').html('Start Animation');
        $('.imageOne').toggleClass('animateSlideTop');

        $('.div2, .div3, .patientAccess').toggle("fast");

        text = 1;
    }
});

$(".div1").on('blur', function() {
    $(this).fadeOut(300);
});

EDIT: The jsfiddle now incorporates what I have been trying to utilize.

Answer 1

You can namespace an event handler using this syntax:

$("#myElement").on("click.myEventHandlerName", function() { ... });

At any point, you can remove the event handler again by calling

$("#myElement").off("click.myEventHandlerName", "#myElement");

Answer 2

As a demonstration, I built a simplified version of what I think you're aiming to achieve.

I'm using the "event.target" method described in this answer .

Since you are using CSS transitions, I'm using jQuery to detect the end of those transitions using a method found here .

I've given all boxes a class of "animbox" so that they can all be referenced as a group. I've also given each box its own ID so it can be styled individually with CSS.

I've commented the code in an attempt to explain what's going on.

 // define all box elements var $allBoxes = jQuery('.animbox'); // FUNCTION TO SHOW A SELECTED BOX function showBox($thisBox) { $allBoxes.hide(); // hide all boxes $thisBox.show().addClass('animateSlide'); // show and animate selected box $('div.login', $thisBox).text("Go Back"); // change the selected box's link text } // FUNCTION TO RETURN BOXES TO THE DEFAULT STATE function restoreDefaultState() { var $thisBox = jQuery('div.animbox.animateSlide'); // identify an open box if ($thisBox.length) { // if a box is open... $thisBox.removeClass('animateSlide'); // close this box $thisBox.one('webkitTransitionEnd'+ ' otransitionend'+ ' oTransitionEnd'+ ' msTransitionEnd'+ ' transitionend', function(e) { // when the box is closed... $allBoxes.show(); // show all boxes $('div.login', $thisBox).text("Start Animation"); // change the link text }); } } // CLICK HANDLER FOR ALL "login" TRIGGERS $('div.login').click(function(e) { var $thisBox = $(this).closest('div.animbox'); // identify clicked box if (!$thisBox.hasClass('animateSlide')) { // if the box is not open... showBox($thisBox); // open it } else { // otherwise... restoreDefaultState(); // restore the default state } }); // CLICK HANDLER TO RESTORE DEFAULT STATE WHEN CLICK HAPPENS OUTSIDE A BOX $('body').click(function(evt) { if ($(evt.target).hasClass('animbox') || // if a box is clicked... $(evt.target).closest('div.animbox').length > 0) { // or a child of a box... return; // cancel } restoreDefaultState(); // restore the default state }); 

 div.container-fluid { background-color: #464646; } .v-center { display: table; height: 100vh; } .content { display: table-cell; vertical-align: middle; text-align: center; } .patientAccess { transition: all .5s; background: white; height: 200px; width: 90%; position: absolute; opacity: 0.7; margin-top: -100px; } .patientAccess p { font-size: 1.5em; font-weight: bold; } div.animbox { transition: all .5s; position: absolute; cursor: pointer; width: 90%; height: 100px; opacity: 0.7; } div#animbox1 { background: #e76700; } div#animbox2 { background: #74b8fe; } div#animbox3 { background: #848484; } div.login { color: white; font-size: 1em; cursor: pointer; } div#animbox1.animateSlide { width: 200px; height: 300px; margin-left: 100px; opacity: 1; } div#animbox2.animateSlide { width: 250px; height: 450px; margin-left: -25px; margin-top: -150px; } div#animbox3.animateSlide { width: 150px; height: 150px; opacity: .5; margin-left: -100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row-fluid"> <div class="col-xs-12 v-center"> <div class="content text-center"> <div class="col-xs-2 animated slideInRight "></div> <div class="col-xs-2 animated slideInRight "> <div class="patientAccess"> <p>Patient Resource Access</p> </div> </div> <div class="col-xs-2 animated slideInRight"> <div class="animbox" id="animbox1"> <div class="login">Start Animation</div> <div class="loginform_hidden "></div> </div> </div> <div class="col-xs-2 animated slideInRight"> <div class="animbox" id="animbox2"> <div class="login">Start Animation</div> <div class="registrationform_hidden"></div> </div> </div> <div class="col-xs-2 animated slideInRight"> <div class="animbox" id="animbox3"> <div class="login">Start Animation</div> </div> </div> </div> </div> </div> </div>