Quick / Basic Question - Hide/Show Toggle (Java Script)

Question

I have a basic question that I think somebody may easily be able to answer. I have very little coding experience but just need one simple change to complete website I am making,.

I have a simple toggle similar to this example I have used. :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
</style>
</head>
<body>



<text onclick="myFunction()">Try it</text>

<div id="myDIV">
This is my DIV element.
</div>


<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

</body>
</html>

I would like the #myDIV to disappear when clicking outside the div/container as well as disappear when clicking on the "Try it" text/button. I guess I must edit the script. I have tried for a few hours but no luck.

Could somebody help me with this? Sorry if silly / basic question.

You should event listen to any mouse click outside your element. In order to do that please check this question here:https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element — Eldshe, Dec 17 '20 at 10:44

score 0 · Answer 1 · answered Dec 17 '20 at 10:46

0

You should get the general DOM and inverse the function like: if div clicked, display block else display none.

answered Dec 17 '20 at 10:46

Taolana

1
6

Thank you. Would you be able to show me how this is written within the above code? I really have very little experience.. – Tom Dec 17 '20 at 10:49
Welcome to SO! Please read the [tour](https://stackoverflow.com/tour), and [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) – Tomer Shetah Dec 17 '20 at 10:55

Meslzy · Answer 2 · 2020-12-17T11:42:31.423

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #myDIV {
            width: 100%;
            padding: 50px 0;
            text-align: center;
            background-color: lightblue;
            margin-top: 20px;

            /*display: none;*/
        }
    </style>
</head>
<body>


<text onclick="myFunction()">Try it</text>

<!--you have to add display property and the default value of it will be none-->
<!--you can add this to the style directly-->
<div id="myDIV" style="display: none">
    This is my DIV element.

    <!--for adding a link you have to use <a href="<the link here>"></a> like this-->
    <a href="https://google.com" id="link">Hello google</a>
</div>


<script>
  function myFunction() {
    const x = document.getElementById("myDIV");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

  // this event will run when your left mouse down
  document.addEventListener("mousedown", (event) => {
    // check if the event target is not the element with id of [myDIV]
    // check if the event target is not the element with id of [link] cus when you click on the link the target will be link element
    if (event.target.id !== "myDIV" && event.target.id !== "link") {
      const x = document.getElementById("myDIV");
      x.style.display = "none";
    }
  });
</script>

</body>
</html>

This is great. I just need the page to load without displaying #mydiv . Would it be possible to add this for me? Thanks — Tom, Dec 17 '20 at 11:26
Thanks, If I want to have a link in the #mydiv is this possible ? When I go to click on the link in the text, the div disappears on click unfortunately. — Tom, Dec 17 '20 at 11:29
sir, I think you skip a lot of tutorials, ill do it for you but you need to search on YouTube for [full course HTML / CSS / JAVASCRIPT] ; — Meslzy, Dec 17 '20 at 11:35
Indeed you are right, this is a very quick personal project so I had very little time to read anything in depth and probably skipped a lot of basics. . Thanks for your help, much appreciated, all working now Will love to learn in depth when I get the time. — Tom, Dec 17 '20 at 14:15

score 0 · Answer 3 · answered Dec 17 '20 at 10:56

Add a hide class to hide myDIV. It would make it much easier JS-wise to hide and show the div. Then, let the window handle the clicks rather than the button:

var x = document.getElementById("myDIV");
var y = document.getElementById("myBtn")

window.addEventListener("click", function(e) {
  if(e.target != x && e.target != y) {
    x.classList.add("hide");
  } else if(e.target == y) {
    x.classList.toggle("hide");
  }
});

#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

#myDIV.hide {
  display: none;
}

<text id="myBtn">Try it</text>

<div id="myDIV">
  This is my DIV element.
</div>

score 0 · Answer 4 · 2020-12-17T11:06:22.410

0

Check out this snippet, I feel this solves your usecase.

 <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
  </style>
</head>

<body>



  <text onclick="myFunction()">Try it</text>

  <div id="myDIV">
    This is my DIV element.
  </div>


  <script>
    window.onload = function () {
      var x = document.getElementById("myDIV");
      x.style.display = "none"
      document.onclick = function (e) {
        if (x.style.display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
      };
    };


  </script>

</body>

</html>

edited Dec 17 '20 at 11:06

answered Dec 17 '20 at 10:57

Thank you a lot! This looks great. Only issue is the div showing when the page loads. Do you know how this could be hidden on load ? – Tom Dec 17 '20 at 11:02
@Tom updated the snippet, please take a look. – Dec 17 '20 at 11:06
Perfect! Thank you a lot. Have a great day. – Tom Dec 17 '20 at 11:08
You can upvote the answer, if it helped you, Thanks again @Tom – Dec 17 '20 at 11:09
If you want anywhere in the webpage, to click and to hide/show of the div, then you have to add event listener to whole document i.e document.onclick, but if you want to add it to specific element, then you can add eventlistener to that specific element like you did earlier. – Dec 17 '20 at 11:19

Quick / Basic Question - Hide/Show Toggle (Java Script)

4 Answers4