CODEWITHSUNDEEP
javascripthtmlcss
Chenius
Chenius

Reputation: 131

Click on a div to make another appear and hide

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

Upvotes: 1

Views: 1482

Answers (6)

Saif
Saif

Reputation: 3452

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>

Upvotes: 1

Jack
Jack

Reputation: 9388

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/

Upvotes: 1

baao
baao

Reputation: 73221

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>

Upvotes: 3

user2531551
user2531551

Reputation: 21

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>

Upvotes: -1

Ali
Ali

Reputation: 776

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>

Upvotes: 1

connexo
connexo

Reputation: 56744

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>

Upvotes: 1

Related Questions