Show div once clicked and hide when clicking outside

Question

I'm trying to show the #subscribe-pop div once a link is clicked and hide it when clicking anywhere outside it. I can get it to show and hide if I change the:

$('document').click(function() {

TO

$('#SomeOtherRandomDiv').click(function() {

HTML:

<div id="footleft">
    <a href="#" onclick="toggle_visibility('subscribe-pop');">Click here to show div</a>
    <div id="subscribe-pop"><p>my content</p></div>
</div>

Script:

<script type="text/javascript">
    function toggle_visibility(id) {
        var e = document.getElementById("subscribe-pop");
        if(e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
        }
    }

    $('document').click(function() {
        $('#subscribe-pop').hide(); //Hide the menus if visible
    });

    $('#subscribe-pop').click(function(e){
        e.stopPropagation();
    });
</script>

http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — MarGa, Apr 24 '13 at 13:36

score 14 · Accepted Answer · edited Aug 18 '17 at 04:30

14

You have to stop the event propagation in your container ('footleft' in this case), so the parent element don't notice the event was triggered.

Something like this:

HTML

 <div id="footleft">
    <a href="#" id='link'>Click here to show div</a>
    <div id="subscribe-pop"><p>my content</p></div>
 </div>

JS

 $('html').click(function() {
    $('#subscribe-pop').hide();
 })

 $('#footleft').click(function(e){
     e.stopPropagation();
 });

 $('#link').click(function(e) {
     $('#subscribe-pop').toggle();
 });

See it working here.

edited Aug 18 '17 at 04:30

PEHLAJ

9,980
9
41
53

answered Apr 24 '13 at 14:06

Luigi Siri

2,068
2
19
27

Awesome, this works great, thank you (and everyone else) for your replies :) – rizzledon Apr 25 '13 at 00:52
Understood, but still working on my side, even with the form. [Try it](http://jsfiddle.net/4yBGt/2/). Also, make sure your html is in order. If this works, don't forget to check this answer as the solution. :) – Luigi Siri Apr 25 '13 at 12:05
Lovely solution, i was looking for this – Muhammad Ahsan May 16 '13 at 05:48

score 1 · Answer 2 · answered Apr 24 '13 at 14:21

I reckon that the asker is trying to accomplish a jquery modal type of display of a div.

Should you like to check this link out, the page upon load displays a modal div that drives your eye into the center of the screen because it dims the background.

Moreover, I compiled a short jsFiddle for you to check on. if you are allowed to use jquery with your requirements, you can also check out their site.

Here is the code for showing or hiding your pop-up div

var toggleVisibility = function (){
     if($('#subscribe-pop').is(":not(:visible)") ){
            $('#subscribe-pop').show(); 
        }else{
             $('#subscribe-pop').hide(); 
        }   
    }

score -1 · Answer 3 · edited May 23 '17 at 12:07

-1

Changing $(document).click() to $('html').click() should solve the main problem.

Secondly, you do not need the toggle_visibility() function at all, you can simply do:

$('#subscribe-pop').toggle();

Ref: changed body to html as per this answer: How do I detect a click outside an element?

edited May 23 '17 at 12:07

Community

1
1

answered Apr 24 '13 at 13:49

techfoobar

65,616
14
114
135

Show div once clicked and hide when clicking outside

3 Answers3

Linked