JavaScript: Is there a way to toggle the visibility of an element on click?

Question

JavaScript: Is there a way to toggle the visibility of an element on click?

I am currently working on writing a code that will allow me to make any part of the screen clickable. When a user clicks on the screen, a message saying "click!" should be displayed. So far, this is the code I have:

HTML:

<html>
    <head>
         <title>Handling Events Anywhere</title>
         <script type="text/javascript" src="anywhere.js"></script>
         <link type="text/css" rel="stylesheet" href="anywhere.css" />
    </head>
    <body id="body" onload="init();">
      <div id="message"> Click! </div>
  </body></html>

JavaScript:

var element;
function init(){
   element = document.getElementById("message");
   document.getElementById("message").style.visibility = "hidden";
   element.onmousedown = displayMessage(element);
   element.onmouseup = hideMessage;
}     
function displayMessage(element) {
   element.style.visibility = "visible";
}
function hideMessage() {
   element.style.visibility = "hidden";   
}

CSS:

body {  
}
div#message{
}

So far, my attempts to show and hide the message when clicked have not been successful. I apologize for any language errors in my explanation. English is not my first language. If anyone could assist me with this, it would be greatly appreciated. Thank you.

javascript jquery html css

Answer 1

Answer №1

let isVisible = true,
elementBody = document.getElementById("body"),
elementMessage = document.getElementById("message");

elementBody.onclick = function() {
     if (isVisible === true) {
        elementMessage.style.visibility = "hidden";
        isVisible = false;
    } else {
        elementMessage.style.visibility = "visible";
        isVisible = true;
    }
}

Update Changed selector to target any part of the screen clicked, as per your request.

Answer 2

let isVisible = true,
elementBody = document.getElementById("body"),
elementMessage = document.getElementById("message");

elementBody.onclick = function() {
     if (isVisible === true) {
        elementMessage.style.visibility = "hidden";
        isVisible = false;
    } else {
        elementMessage.style.visibility = "visible";
        isVisible = true;
    }
}

Update Changed selector to target any part of the screen clicked, as per your request.

Answer 3

Answer №2

Here is a suggested solution:

function toggleVisibility(targetID){
    var target = document.getElementById(targetID),
        visibility = target.style.visibility;
    target.style.visibility = visibility && visibility == 'visible' ? 'hidden' : 'visible';
}

document.body.addEventListener('click', function(){
    toggleVisibility('message');
});

Check out this simple demonstration on JS Fiddle.

An alternative approach using visibility instead of display:

function toggleVisibility(targetID){
    var target = document.getElementById(targetID),
        visibility = target.style.visibility;
    target.style.visibility = visibility && visibility == 'visible' ? 'hidden' : 'visible';
}

document.body.addEventListener('click', function(){
    toggleVisibility('message');
});

Here's another demo on JS Fiddle for reference.

For more information, see the following resources:

EventTarget.addEventListener() documentation.

Answer 4

Here is a suggested solution:

function toggleVisibility(targetID){
    var target = document.getElementById(targetID),
        visibility = target.style.visibility;
    target.style.visibility = visibility && visibility == 'visible' ? 'hidden' : 'visible';
}

document.body.addEventListener('click', function(){
    toggleVisibility('message');
});

Check out this simple demonstration on JS Fiddle.

An alternative approach using visibility instead of display:

function toggleVisibility(targetID){
    var target = document.getElementById(targetID),
        visibility = target.style.visibility;
    target.style.visibility = visibility && visibility == 'visible' ? 'hidden' : 'visible';
}

document.body.addEventListener('click', function(){
    toggleVisibility('message');
});

Here's another demo on JS Fiddle for reference.

For more information, see the following resources:

EventTarget.addEventListener() documentation.

Answer 5

Answer №3

If you are looking to hide elements on a webpage using jQuery, there are different approaches you can take. One method is to use the display property rather than the visibility property. When an element is hidden using display: none;, it is completely removed from the layout, whereas with visibility, the element still occupies space.

Here is an example of how to hide an element using display:

<div id="message"> Click! </div>

The CSS for this solution would be:

#message {
   display: none;
}

And here is the jQuery code:

$(document).ready(function(){
    $(window).click(function(){
        $('#message').toggle();
    });
});

You can see a live demo of this in action here.

Alternatively, if you prefer to use the visibility property, here is another solution using jQuery:

HTML:

<div id="message">Click!</div>

jQuery:

$(document).ready(function () {
    $('#message').css('visibility', 'hidden');
    $(window).click(function () {

        if ($('#message').css('visibility') == 'hidden') 
        $('#message').css('visibility', 'visible');

        else $('#message').css('visibility', 'hidden');

    });
});

You can view this second approach in action with a demo here.

Answer 6

If you are looking to hide elements on a webpage using jQuery, there are different approaches you can take. One method is to use the display property rather than the visibility property. When an element is hidden using display: none;, it is completely removed from the layout, whereas with visibility, the element still occupies space.

Here is an example of how to hide an element using display:

<div id="message"> Click! </div>

The CSS for this solution would be:

#message {
   display: none;
}

And here is the jQuery code:

$(document).ready(function(){
    $(window).click(function(){
        $('#message').toggle();
    });
});

You can see a live demo of this in action here.

Alternatively, if you prefer to use the visibility property, here is another solution using jQuery:

HTML:

<div id="message">Click!</div>

jQuery:

$(document).ready(function () {
    $('#message').css('visibility', 'hidden');
    $(window).click(function () {

        if ($('#message').css('visibility') == 'hidden') 
        $('#message').css('visibility', 'visible');

        else $('#message').css('visibility', 'hidden');

    });
});

You can view this second approach in action with a demo here.

JavaScript: Is there a way to toggle the visibility of an element on click?

Answer №1

Answer №2

Answer №3

Similar questions

How can I obtain hosting XULDocument for a ContentWindow or HTMLDocument within a Firefox extension?

Jquery loader for loading html and php files

Enhancing Donut Chart with d3.js

Repetitive occurrences of events being emitted from a VueJS component

Holding off $ajax requests until specific code finishes executing

Does SCSS have a specific 'self' identifier?

Persist the scroll position within a div even after refreshing a PHP file using AJAX

Examining the false positive detection of an apparent visibility issue with

After the page has finished loading, I aim to have the modal window pop up after 10 seconds. Thank you to all!

Should you prioritize internationalizing your image alt attributes?

After closing the modal, I am attempting to reset it, but unfortunately, it is not functioning as expected

Error unfound: [CLIENT_MISSING_INTENTS]: The Client requires valid intents to function properly

I need to know how to use Axios to fetch data from multiple sources at the same time without any risk of the

Customizing the Height of Elements in Bootstrap

The occurrence of "Error [ERR_STREAM_WRITE_AFTER_END]" was noted when trying to write to an HTTP server in

Encountering invalid JSON response while making an API request

Problem with keyframe animations in Internet Explorer 10

Responsive Bootstrap 4 Login Form with customized top height

Tips for live streaming a canvas element using WebRTC

formBuilder does not exist as a function