cannot hide a div after using display:block

Question

I want to open a box when clicking on an element... and then make it desapear when I click on a "CLOSE" button... But this is not working. the box does appear by using "display:block" but it does not disappear with "display:none" (see code enclosed)

(I also tried with addClass and removeClass using a class with css attribut such as display:none but was not working as well.)

<html>
    <head>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
        <style>
            div.back {  
                float: left;
                background-color: grey;
                width:100px;
                height:100px;
                margin:10px;
                padding:10px;
            }
            .window {
                display: none;
                position: fixed;
                top: 150px;
                left: 150px;
                width:150px;
                height:100px; 
                background-color:blue;
            }
        </style>
        <script>
            $(document).ready(function(){
                $(".back").click(function(){       
                    $(".window").css("display","block");     
                });
                $(".btn_validate").click(function(){        
                    $(".window").css("display","none");              
                });
            });
        </script>
    </head>
    <body>
        <div class="back">
            Some text
            <div id="draggable" class="window">
                <input type="button" value="CLOSE" class="btn_validate"/>
            </div>
        </div>
    </body>
</html>

Try using $('.window').hide(); and $('.window').show();. See: api.jquery.com/hide and api.jquery.com/show — Nagra
– Nagra, Commented Aug 15, 2014 at 20:19
Meant it more as a shorthand than a solution. That's why I left it as a comment rather than an answer. — Nagra
– Nagra, Commented Aug 15, 2014 at 20:36

j08691 · Accepted Answer · 2014-08-15 20:21:09Z

8

Actually it does hide, but then it opens right back up again because the click bubbles up and triggers the click on the parent. Use e.stopPropagation(); to fix it:

$(".btn_validate").click(function (e) {
    e.stopPropagation();
    $(".window").css("display", "none");
});

jsFiddle example

answered Aug 15, 2014 at 20:21

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2014-08-15 20:32:16Z

3

It is being hidden by your setting display: none...but then it's being immediately shown again because the click bubbles to your .back element.

You can stop that using e.stopPropagation() or return false; (return false; in a jQuery handler does e.stopPropagation() and e.preventDefault()). Example

$(".btn_validate").click(function(){        
      $(".window").css("display","none");              
      return false;
});

or (example)

$(".btn_validate").click(function(e){        
      e.stopPropagation();
      $(".window").css("display","none");              
});

edited Aug 15, 2014 at 20:32

answered Aug 15, 2014 at 20:21

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

2 Comments

GolezTrol Over a year ago

+1. But any reason to put stopPropagation() at the end? It will probably work just fine, but I always put it at the top of the function, and I don't recall ever having seen otherwise so it almost feels to me as if you're breaking a standard. ;) Just curious.

T.J. Crowder Over a year ago

@GolezTrol: No, no reason. As long as it gets executed it's fine. In fact, I usually put them near the top if the call isn't conditional to some logic (as that's one of the simplest ways to ensure it's on a code branch). There's no standard about this at all. That said, since I usually do put it at the top, I've moved it. :-)

Collectives™ on Stack Overflow

cannot hide a div after using display:block

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related