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

Transforming a JavaScript object into a different shape

Generating a fresh document in MongoDB using Mongoose, complete with references and assigned ObjectIDs

Enhance Bootstrap typeahead to accommodate multiple values

Issue with invoking controller action in MVC4 via AJAX

Exploring the world of Node.js, JSON, SQL, and database tables

Playing with vue component dependencies

Transmitting information through Ajax from a submission form

Extracting unique text values from nested div elements within list items using Selenium with Python

HTML Data Service for WCF

Malfunction detected in Json autocomplete function

Leveraging CasperJS in a typical JavaScript script

The SimpleHTTPServer is causing Google Maps Places Autocomplete feature to malfunction

What is causing the hyperlink to fail to redirect to the specified URL upon being clicked?

Exploring an array of JSON data with HandlebarsJS and BackboneJS

Encountering a "GET" error while attempting to make a post request to a WCF Web

Transfer the imageURI to a different HTML page

What is the best way to display content at a specific time using Angular?

What are the steps for sorting objects in an array by their data type attribute?

Challenges arise when utilizing CSS3 animations in conjunction with transitions triggered by toggling a JavaScript class

Contrast 2 GET objects retrieved from separate controllers