How can you use Jquery to hide an element when clicking on a DIV?

Question

How can you use Jquery to hide an element when clicking on a DIV?

I'm currently developing a JavaScript with jQuery script that displays a div block when the countdown timer reaches zero.

Check out my code snippet:

<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>

And here's how I styled it using CSS:

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

The functionality seems to be working fine, but for some reason, clicking on "X" isn't hiding the countblock. Can you help me identify where I went wrong and provide a solution?

javascript jquery html css

Answer 1

Answer №1

Your code appears to be correct, but it may not be functioning as expected due to its current placement. It is positioned before the body tag, so you will need to utilize $(document).ready(); or relocate the code to the footer of your page.

Answer 2

Your code appears to be correct, but it may not be functioning as expected due to its current placement. It is positioned before the body tag, so you will need to utilize $(document).ready(); or relocate the code to the footer of your page.

Answer 3

Answer №2

add an event listener for click once the DOM is loaded

  <script>
    $(function () {
        var number = 10,
        timer = setInterval(function () {
            $("p.timer").html(number);
            if (number == 0) {
             $("p.timer").hide();
            $("p#blockTimer").show();
            clearInterval(timer);
         }
          number--;
       }, 1000);
  });
  </script>

<body>

  <p id="hideOnClick"> Hide Me </p>

  <p class="timer"></p>

 <p id="blockTimer"> text will be displayed </p>

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

Answer 4

add an event listener for click once the DOM is loaded

  <script>
    $(function () {
        var number = 10,
        timer = setInterval(function () {
            $("p.timer").html(number);
            if (number == 0) {
             $("p.timer").hide();
            $("p#blockTimer").show();
            clearInterval(timer);
         }
          number--;
       }, 1000);
  });
  </script>

<body>

  <p id="hideOnClick"> Hide Me </p>

  <p class="timer"></p>

 <p id="blockTimer"> text will be displayed </p>

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

Answer 5

Answer №3

Tested out a jsfiddle and everything seems to be running smoothly. It's possible that there might be a timing issue: the JavaScript is being loaded before all of the HTML elements are fully loaded. You should try using $( document ).ready

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

Take a look at this functioning example: http://jsfiddle.net/4RtYh/7/

Answer 6

Tested out a jsfiddle and everything seems to be running smoothly. It's possible that there might be a timing issue: the JavaScript is being loaded before all of the HTML elements are fully loaded. You should try using $( document ).ready

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

Take a look at this functioning example: http://jsfiddle.net/4RtYh/7/

Answer 7

Answer №4

Here's how it operates, check it out

$(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();
    });

Answer 8

Here's how it operates, check it out

$(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();
    });

Answer 9

Answer №5

Swap the contents of the head and 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>

Answer 10

Swap the contents of the head and 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>

How can you use Jquery to hide an element when clicking on a DIV?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Ignored CSS hover effect on touch screen devices

jQuery is throwing an error indicating a missing closing parenthesis after the argument list

HTML and CSS: Centering elements inside div containers

What is the reason behind the majority of marketing tags (like Omniture, XE, etc) being implemented using document.write()?

How can I assign a background image to a specific state or template using AngularJS?

Utilizing Shadertoy's iResolution variable within a Three.js code snippet

Retrieving Dropdown Value in Bootstrap 5: How to Obtain the Selected Item's Value from the Dropdown Button

Unexpected behavior observed when executing JavaScript Promise.all code

Develop a JavaScript application that contains a collection of strings, and efficiently sorts them with a time complexity of O(nlog n)

Using jQuery, implement a functionality where a line break is added when the Enter key is pressed. Furthermore, the added

How do you incorporate a basic if statement within a td tag in PHP?

Having trouble executing the JavaScript file after rendering it through Rails

Learn the art of closing an AngularJS accordion automatically when another accordion is opened within an AngularJS application

Steps for assigning a 404 status code upon promise rejection

Automatically resize iframe height to fit content

How can refs be applied effectively in React applications?

Retrieving selective attributes from Cosmos DB NoSQL using NodeJS/Javascript: Exploring the readAll() method for retrieving specific attributes instead of the entire object

Analyzing the elements in a 2D matrix against those in a 1D array

Creating infinite dynamic name selectors: A step-by-step guide

Attach a 20% image to the top that remains visible while scrolling