Click on a div to make another appear and hide

Question

I have created two divs in the body tag. The one div is not visible, but I want it to become visible by clicking on the other div as well as it to disappear by clicking that div again. Basically div2 is not visible when the page loads, I want it to become visible and hidden by clicking div1. Please Help. Thank you!

HTML:

 <div id="div1"></div>
<div id="div2"></div>

CSS:

#div1{
height: 100px;
width: 100px;
background-color: orange;
}

#div2{
height: 100px;
width: 100px;
background-color: blue;
visibility: hidden;
}

Answer 1

Create a extra class like hidden, then toggle that class on click of div1. Note that this answer uses javascript, without it it's not possible to make the change like you've described it in your question.

document.getElementById('div1').addEventListener('click', () => {
  document.getElementById('div2').classList.toggle('hidden');
}, false);

#div1 {
  height: 100px;
  width: 100px;
  background-color: orange;
}

#div2 {
  height: 100px;
  width: 100px;
  background-color: blue;
}

.hidden {
  visibility: hidden;
}

<div id="div1">Foo</div>
<div id="div2" class="hidden">Bar</div>

Answer 2

Using CSS without any further changes you can make it so as long as #div1 has mouseDown on it, #div2 becomes visible.

#div1{
  height: 100px;
  width: 100px;
  background-color: orange;
}

#div2{
  height: 100px;
  width: 100px;
  background-color: blue;
  visibility: hidden;
}

#div1:active + #div2 {
  visibility: visible;
}

<div id="div1"></div>
<div id="div2"></div>

Answer 3

You can add the javscript script given below within <script> tags.

function myFunction() {
    var x = document.getElementById("div2");
    if (x.style.visibility === "hidden") {
        x.style.visibility = "visible";
    } else {
        x.style.visibility = "hidden";
    }
} 

#div1{
height: 100px;
width: 100px;
background-color: orange;
}

#div2{
height: 100px;
width: 100px;
background-color: blue;
visibility: hidden;
}

<div id="div1" onclick="myFunction()"></div>
<div id="div2"></div>

Answer 4

you can do it in the following way too.

<script>
           
    function toggleFunction() {

      var div1 = document.getElementById("div1");
      var div2 = document.getElementById("div2");
      if (div1.style.display === "none") {
          div1.style.display = "block";
          div2.style.display ="none";

      } else {
          div1.style.display = "none";
          div2.style.display="block";
      }
   }
</script>

<div id="div1" onclick="toggleFunction();">div1</div>
<div id="div2" onclick="toggleFunction();">div2</div>
                   

Answer 5

This question has been answered, and the answer works well. I wanted to share one other workaround that is just strictly CSS. It's commonly referred to as the "checkbox hack", which was pretty popular a few years back (a ton of demos were made of whack-a-mole type games where no JS was used).

The idea is that you use a combination label/checkbox, which applies state (checkbox) to your DOM and that state is represented visually using the :checked pseudo class. For your example, we could modify the mark up and include our input/label like:

<input type="checkbox" id="triggerVisibility"></input>

<div id="div1">
    <label for="triggerVisibility" id="label1"></label>
</div>

<div id="div2"></div>

One important thing to notice is that your checkbox should be BEFORE the element you want to apply "state" to. That's because, for the CSS, we'll use a sibling selector (either + or ~)

#triggerVisibility:checked ~ #div2 {
    visibility: visible;
}

In our case, we're using the more "relaxed" general sibling selector (~), which means anything that follows the input with id "triggerVisibility" will have visibility set to visible, when the checkbox is checked. Pretty cool, huh?

Here's a fiddle that includes other "state" (like content) that we change when the input is checked/unchecked:

http://jsfiddle.net/nrwqh5tp/

Answer 6

Go through here for full details:

$("#div1").click(function(){
 // alert("hi");
  $("#div2").toggleClass("Active");
  
});

#div1{
height: 100px;
width: 100px;
background-color: orange;
cursor:pointer
}

#div2{
height: 100px;
width: 100px;
background-color: blue;
visibility: hidden;
}
.Active{
  visibility: visible!important;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div id="div1">Div 1</div>

<div id="div2">Div 2</div>
</body>
</html>