Jquery - When click on DIV and hide element?

Question

I am currently working on Javascript with Jquery which is showing div block when seconds goes = 0.

Here is my code:

<HTML>
<HEAD>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="./test.css" />
<script>
$(function () {
var count = 5,
    countdown = setInterval(function () {
        $("p.countdown").html(count);
        if (count == 0) {
            $("p.countdown").hide();
            $("p#countblock").show();
            clearInterval(countdown);
        }
        count--;
    }, 1000);
});

$('#clickToHide').click(function() {
        $("p#countblock").hide();
    });
</script>
</HEAD>
<body>

<p id="clickToHide"> X </p>

<p class="countdown"></p>

<p id="countblock"> text to appear </p>
</body>
</HTML>

Here is my CSS:

#countblock{
    display:none;
    width:200px;
    height:50px;
    position:absolute;
    background-color:#f1f1f1;
}

Everything works okay, but when I try to click on "X" it's not hiding the countblock. Where is my mistake and how I can fix it?

Not working. You can check my code here: www.vemvo.com/test/index.html — user2987591
– user2987591, Commented Nov 14, 2013 at 13:19
i have pasted ur code in jsfiddler and checked its working fine. jsfiddle.net/WS25z — Vivek P
– Vivek P, Commented Nov 14, 2013 at 13:23

Ruan Carlos · Accepted Answer · 2013-11-14 13:25:59Z

1

You code is right, but it still not working because the place it is. It is before the body, so you have to use $(document).ready(); or put the code on the footer of your page.

answered Nov 14, 2013 at 13:25

Ruan Carlos

5056 silver badges12 bronze badges

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

Comments

Gowsikan · Accepted Answer · 2013-11-14 13:22:39Z

0

bind your click event after dom

  <script>
    $(function () {
        var count = 5,
        countdown = setInterval(function () {
            $("p.countdown").html(count);
            if (count == 0) {
             $("p.countdown").hide();
            $("p#countblock").show();
            clearInterval(countdown);
         }
          count--;
       }, 1000);
  });
  </script>

<body>

  <p id="clickToHide"> X </p>

  <p class="countdown"></p>

 <p id="countblock"> text to appear </p>

 <script>     
   $('#clickToHide').click(function() {
         $("p#countblock").hide();
     });
  </script>

answered Nov 14, 2013 at 13:22

Gowsikan

5,7219 gold badges36 silver badges44 bronze badges

Comments

Friederike · Accepted Answer · 2013-11-14 13:22:51Z

0

Tried a jsfiddle and it's working fine. Maybe you have a timing problem: js is loaded before all html elements are there. Try using $( document ).ready

$(document).ready(function() {
     // your code here
});

See working example: http://jsfiddle.net/W7PqB/2/

answered Nov 14, 2013 at 13:22

Friederike

1,28216 silver badges30 bronze badges

Comments

Bharath R · Accepted Answer · 2013-11-14 13:26:53Z

0

Its working like this , fiddle

$(function () {
var count = 5,
    countdown = setInterval(function () {
        $("p.countdown").html(count);
        if (count == 0) {
            $("p.countdown").hide();
            $("#countblock").show();
            clearInterval(countdown);
        }
        count--;
    }, 1000);
});

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

        $("#countblock").hide();
    });

answered Nov 14, 2013 at 13:26

Bharath R

1,5161 gold badge12 silver badges23 bronze badges

Comments

Peter Van de Laar · Accepted Answer · 2013-11-14 13:27:14Z

0

Replace the script from head to body:

<body>
<button id="clickToHide"> X </button>
<p class="countdown"></p>
<p id="countblock"> text to appear </p>
<script>
$('#clickToHide').click(function() {
   $("#countblock").hide();
});
</script>
</body>

answered Nov 14, 2013 at 13:27

Peter Van de Laar

3992 silver badges12 bronze badges

Collectives™ on Stack Overflow

Jquery - When click on DIV and hide element?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related