Conceal the div by clicking outside of it

Question

Conceal the div by clicking outside of it

Is there a way to conceal the hidden div with the "hidden" class? I'd like for it to slide out when the user clicks outside of the hidden div.

HTML

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
      <div class="hidden">Here I am !</div>
      <div class="left">Left panel</div>
      <div class="right">Right panel</div>
      <div class="clear"></div>
      <a href="#" id="slide">Show/hide Slide Panel</a>
   </body>
</html>

CSS

.left,
.hidden {
    float: left;
    height: 350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index: 1;
}

.hidden {
    width: 25%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}

.right {
    width: 50%;
    float: right;
    height: 350px;
    background: #000;
    color: #fff;
}

.clear {
    clear: both;
}

JS

$(document).ready(function () {
    $('#slide').click(function () {
        var hidden = $('.hidden');
        if (hidden.hasClass('visible')) {
            hidden.animate({
                "left": "-1000px"
            }, "slow").removeClass('visible');
        } else {
            hidden.animate({
                "left": "0px"
            }, "slow").addClass('visible');
        }
    });
});

I appreciate any help you can provide!

javascript jquery html css

Answer 1

Answer №1

To utilize this code, you have the flexibility to specify which elements on your page can conceal your panel. In this instance, I have selected classes left, right, and clear:

$(document).ready(function () {
    $('#slide').click(function () {
        hide_el ();
    });
    
    $('.left, .right, .clear').click(()=>{
        var hidden = $('.hidden');
        if (hidden.hasClass('visible')) {
            hidden.animate({
                "left": "-1000px"
            }, "slow").removeClass('visible');
        }
    }); 
});

function hide_el (){
      var hidden = $('.hidden');
        if (hidden.hasClass('visible')) {
            hidden.animate({
                "left": "-1000px"
            }, "slow").removeClass('visible');
        } else {
            hidden.animate({
                "left": "0px"
            }, "slow").addClass('visible');
        }
}

.left,
.hidden {
    float: left;
    height: 350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index: 1;
}

.hidden {
    width: 25%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}

.right {
    width: 50%;
    float: right;
    height: 350px;
    background: #000;
    color: #fff;
}

.clear {
    clear: both;
}

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
      <div class="hidden">Here I am !</div>
      <div class="left">Left panel</div>
      <div class="right">Right panel</div>
      <div class="clear"></div>
      <a href="#" id="slide">Show/hide Slide Panel</a>
   </body>
</html>

If you require a body click function, you can employ the following code:

$(document).ready(function () { 
    
$('#slide').click(function () { 

 hide_el ();      
});

});  
 
function body_click(){
  setTimeout(()=>{
   var hidden = $('.hidden');
    $('body').click( function(event) {
      if( $(event.target).closest(hidden).length === 0 ) {
         if (hidden.hasClass('visible')) {
                hidden.animate({
                    "left": "-1000px"
                }, "slow").removeClass('visible');
        };
      }
    }); 
  }, 1000);   
}

function hide_el (){
 
    $('body').unbind('click');
  var hidden = $('.hidden');
    if (hidden.hasClass('visible')) {
        hidden.animate({
            "left": "-1000px"
        }, "slow").removeClass('visible');
    } else {
        hidden.animate({
            "left": "0px"
        }, "slow").addClass('visible'); 
  body_click();  

    }
}

body {
  height: 300px;
}
.left,
.hidden {
    float: left;
    height: 350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index: 1;
}

.hidden {
    width: 25%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}

.right {
    width: 50%;
    float: right;
    height: 350px;
    background: #000;
    color: #fff;
}

.clear {
    clear: both;
}

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body> 
      <div class="hidden">Here I am !</div>
      <div class="left">Left panel</div>
      <div class="right">Right panel</div>
      <div class="clear"></div>
      <a href="#" id="slide">Show/hide Slide Panel</a>
   </body>
</html>

Answer 2

To utilize this code, you have the flexibility to specify which elements on your page can conceal your panel. In this instance, I have selected classes left, right, and clear:

$(document).ready(function () {
    $('#slide').click(function () {
        hide_el ();
    });
    
    $('.left, .right, .clear').click(()=>{
        var hidden = $('.hidden');
        if (hidden.hasClass('visible')) {
            hidden.animate({
                "left": "-1000px"
            }, "slow").removeClass('visible');
        }
    }); 
});

function hide_el (){
      var hidden = $('.hidden');
        if (hidden.hasClass('visible')) {
            hidden.animate({
                "left": "-1000px"
            }, "slow").removeClass('visible');
        } else {
            hidden.animate({
                "left": "0px"
            }, "slow").addClass('visible');
        }
}

.left,
.hidden {
    float: left;
    height: 350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index: 1;
}

.hidden {
    width: 25%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}

.right {
    width: 50%;
    float: right;
    height: 350px;
    background: #000;
    color: #fff;
}

.clear {
    clear: both;
}

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
      <div class="hidden">Here I am !</div>
      <div class="left">Left panel</div>
      <div class="right">Right panel</div>
      <div class="clear"></div>
      <a href="#" id="slide">Show/hide Slide Panel</a>
   </body>
</html>

If you require a body click function, you can employ the following code:

$(document).ready(function () { 
    
$('#slide').click(function () { 

 hide_el ();      
});

});  
 
function body_click(){
  setTimeout(()=>{
   var hidden = $('.hidden');
    $('body').click( function(event) {
      if( $(event.target).closest(hidden).length === 0 ) {
         if (hidden.hasClass('visible')) {
                hidden.animate({
                    "left": "-1000px"
                }, "slow").removeClass('visible');
        };
      }
    }); 
  }, 1000);   
}

function hide_el (){
 
    $('body').unbind('click');
  var hidden = $('.hidden');
    if (hidden.hasClass('visible')) {
        hidden.animate({
            "left": "-1000px"
        }, "slow").removeClass('visible');
    } else {
        hidden.animate({
            "left": "0px"
        }, "slow").addClass('visible'); 
  body_click();  

    }
}

body {
  height: 300px;
}
.left,
.hidden {
    float: left;
    height: 350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index: 1;
}

.hidden {
    width: 25%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}

.right {
    width: 50%;
    float: right;
    height: 350px;
    background: #000;
    color: #fff;
}

.clear {
    clear: both;
}

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body> 
      <div class="hidden">Here I am !</div>
      <div class="left">Left panel</div>
      <div class="right">Right panel</div>
      <div class="clear"></div>
      <a href="#" id="slide">Show/hide Slide Panel</a>
   </body>
</html>

Answer 3

Answer №2

This piece of code checks to see if you are clicking inside the designated target element or one of its descendants. If not, a specific code will execute. The animation parts have been left out for you to customize. You can view and experiment with the code in action on this fiddle: https://jsfiddle.net/jhe36dmb/1/

$(document).mouseup(function (e)
 {
    var container = $('.hidden');

    if (!container.is(e.target) // Check if the click is not within the container
        && container.has(e.target).length === 0) // Also check if it's not any descendant of the container
    {

      $('.hidden').css('left', '0'); // Run desired code if conditions met
    }
});

Answer 4

This piece of code checks to see if you are clicking inside the designated target element or one of its descendants. If not, a specific code will execute. The animation parts have been left out for you to customize. You can view and experiment with the code in action on this fiddle: https://jsfiddle.net/jhe36dmb/1/

$(document).mouseup(function (e)
 {
    var container = $('.hidden');

    if (!container.is(e.target) // Check if the click is not within the container
        && container.has(e.target).length === 0) // Also check if it's not any descendant of the container
    {

      $('.hidden').css('left', '0'); // Run desired code if conditions met
    }
});

Conceal the div by clicking outside of it

Answer №1

Answer №2

Similar questions

Having issues with jQuery not functioning on this specific web page across all browsers. The reason behind this puzzling dilemma remains elusive to me

Uncovering Secret Information with Beautiful Soup 4

tips on utilizing the JSON information transmitted from the backend

Adding miscellaneous PHP scripts

React-Native Error: Invalid element type detected

Issues with validating the Google Maps API JavaScript tag

When utilizing $resource, Protractor experiences a timeout while trying to synchronize with the page

Tips for incorporating the "build" directory into the Travis-CI build process and deployment of an npm module

Utilizing Javascript to load a vast amount of data onto the browser, followed by initiating an XML

Using the 'client-side rendering' and runtime environment variables in Next.js with the App Router

Developing a dynamic master-details view on a single page with ASP.NET MVC

Is it possible to utilize Ajax submit requests within a (function($){...}(jQuery)); block?

Including files from different directories using PHP

Using Javascript/JQuery to attach a javascript object to a form in order to perform a traditional form

Creating a webpage using jQuery and ajax

Merge a pair of observables to create a single combined output

Utilize the Bootstrap column push-pull feature on the mobile version of

positioning two out of three items in a navigation menu to the right and the remaining one to the left

Do [(ngModel)] bindings strictly adhere to being strings?

Using jQuery to detect and respond to changes in an asp:RadioButtonList