I am facing a challenge with properly closing a div container and restoring it to its original state when I click outside of it. Despite trying various solutions from stackoverflow and extensive internet research, I have been unable to find or come up with a working solution. I attempted using stopPropagation but the issue persists where clicking on the background after the initial interaction continues to toggle the div. You can view a simplified version of my code in this js fiddle https://jsfiddle.net/DTcHh/10545/
Below is the jQuery snippet:
<script>
var text = 1;
$('.login1').click(function(e){
$('.div2, .div3, .patientAccess').toggle("fast");
$('.loginform_hidden').toggleClass('loginform_visible ');
if(text == 1){
$(".div1").toggleClass("animateSlide col-xs-12");
$('.login1').html('Go Back');
$('.imageOne').toggleClass('animateSlideTop');
text = 0;
} else{
$(".div1").toggleClass("animateSlide");
$('.login1').html('Start Animation');
$('.imageOne').toggleClass('animateSlideTop');
text = 1;
}
});
$('.login2').click(function(){
$('.registrationform_hidden').toggleClass('registrationform_visible ');
$('.div1, .div3, .patientAccess').toggle("fast");
$('.imageOne').toggleClass('animateSlideTop');
if(text == 1){
$(".div2").toggleClass("animateSlide2");
$('.login2').html('Go Back');
text = 0;
} else{
$(".div2").toggleClass("animateSlide2");
$('.login2').html('Start Animation');
text = 1;
}
});
$('.div3').click(function(){
$('.imageOne').toggleClass('animateSlideTop');
$('.div1, .div2, .patientAccess').toggle("fast");
if(text == 1){
$(".div3").toggleClass("animateSlide3");
$('.div3').html('Go Back');
text = 0;
} else{
$(".div3").toggleClass("animateSlide3");
$('.div3').html('Start Animation');
text = 1;
}
});
</script>