0

I'm trying to hide a div both when 1) certain other divs are clicked, and when 2) empty space on the margins of the page are clicked, space not contained by any div. I've got the first part covered, but I do not know how to do the second. I don't want the div to hide when ANYTHING outside the div is clicked. Just when empty space is clicked.

Here's a simple jsfiddle to play with.

And here's the basic jsquery I'm using. Can I add something that will make "text1" or "text2" disappear when the user clicks empty space?

$("#2").click(function() {
   $('#text1').slideUp(300);
});

$("#1").click(function() {
   $('#text2').slideUp(300);
});
ozil
  • 6,930
  • 9
  • 33
  • 56
user2985093
  • 63
  • 1
  • 2
  • 13

3 Answers3

2

You can simply add a specific class to the div items that will be clicked and do this:

$(document).click(function (event) {//when anywhere is clicked on the page    
    if (!$(event.target).hasClass('MyClass')) {//if the clicked item has this class
        $('#text2').slideUp(300);//hide     
        $('#text1').slideUp(300);//hide      
    }      
});

DEMO: https://jsfiddle.net/tjrsvbuc/3/

renakre
  • 8,001
  • 5
  • 46
  • 99
  • Doesn't work in my actual file... When the div appears after the click event, this code causes it to collapse again immediately. But beyond that bug, I want the code to specifically target space contained by no div. And it looks like I'd have to specify every div id in my css in this code for it to work that way. In my actual project I have a lot more div ids than just 1 and 2, ya know :) – user2985093 May 12 '15 at 17:42
  • @user2985093 see the update, then you can assign the same class to these divs and use `hasClass` – renakre May 12 '15 at 17:49
  • Right, I'm with you. But notice in this updated [fiddle](https://jsfiddle.net/tjrsvbuc/6/) that when clicking the empty space outside of the specified class, nothing happens to the divs. I want to collapse the divs on clicking that uncontained space. – user2985093 May 12 '15 at 18:02
  • That should do it, but in my project the divs are opening then collapsing immediately (it's definitely this code that causes the collapse). The event that triggers the slideDown is clicking an image with a certain class. I've tried applying this as a second class, an id (changing to hasId). Nothing makes any difference... – user2985093 May 13 '15 at 03:40
  • I pared it down to this [fiddle](https://jsfiddle.net/ggjv72cp/). Really appreciate the help – user2985093 May 13 '15 at 21:41
  • @user2985093 is it okay if you have `class="main_image click"` for the image and delete the parent `div` : https://jsfiddle.net/ggjv72cp/1/ – renakre May 13 '15 at 21:44
  • Thanks so much! Didn't realize that the image being contained by a div with the class wouldn't be enough, that it needed the class itself – user2985093 May 13 '15 at 22:10
0

I found this beaufitul solution here on Stackoverflow:

$(document).mouseup(function (e)
{
    var container = $("#text1, #text2");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.slideUp(300);
    }
});

Updated Fiddle

Community
  • 1
  • 1
GreyRoofPigeon
  • 17,833
  • 4
  • 36
  • 59
  • I tried this one before, actually. It hides the div when anything except the div is clicked. Any blank space, but any other divs too. So that won't work. – user2985093 May 12 '15 at 17:37
0

Hope this is you looking for add an event in javascript e.stopPropagation(); 

$(document).ready(function(){
                $("#1").click(function(e){
                    e.stopPropagation(); 
                    $("#text1").slideDown(300);
                });
            });

$(document).ready(function(e){
                $("#2").click(function(e){
                    e.stopPropagation(); 
                    $("#text2").slideDown(300);
                });
            });

$("#2").click(function() {
                $('#text1').slideUp(300);
            });

$("#1").click(function() {
                $('#text2').slideUp(300);
            });

$("body").click(function() {
    $('#text1').slideUp(300);
    $('#text2').slideUp(300);
  });
SAGAR MANE
  • 685
  • 2
  • 8
  • 23
  • It sure looks nice and neat, but when implemented in the [fiddle](https://jsfiddle.net/tjrsvbuc/4/) it just causes the text to collapse immediately. – user2985093 May 12 '15 at 17:45
  • to stop collapse immediately.. i added an event 'e',and to stop collapse ..i added e.stopPropagation(); function .. so after that that will stop collapsing – SAGAR MANE May 13 '15 at 07:14