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:

CSS:

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

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


w3schools.com/howto/howto_js_toggle_hide_show.asp
– Saif Ur Rahman
Jun 29 at 16:00

Do you want to achieve it without JS?
– hamzox
Jun 29 at 16:00

@hamzox I would like to, but if this is not possible I would appreciate any answer, even if it contains Javascript.
– Chenius
Jun 29 at 16:03

@Chenius Please edit and add the tag javascript to this question also.
– Saif Ur Rahman
Jun 29 at 16:09

javascript

@SaifUrRahman Did it right now, as requested.
– Chenius
Jun 29 at 16:33

6 Answers
6

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.

hidden

div1

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

Foo

Bar

The question is not tagged Javascript.
– connexo
Jun 29 at 16:01

Thanks @connexo. I've edited the answer to explain why it uses js
– bambam
Jun 29 at 16:04

Thank you to everyone who commented and tried to help, it is appreciated!
– Chenius
Jun 29 at 16:10

e => { document.getElementById('div2').classList.toggle('hidden'); } should be () => { document.getElementById('div2').classList.toggle('hidden'); } since you're never using e.
– connexo
Jun 29 at 16:34

e => { document.getElementById('div2').classList.toggle('hidden'); }

() => { document.getElementById('div2').classList.toggle('hidden'); }

e

Kannst du mir den Vorteil davon erklären? @connexo
– bambam
Jun 29 at 16:37

You can add the javscript script given below within 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;
}

OP's using visibility, not display.
– connexo
Jun 29 at 16:35

visibility

display

I know. I find it better using display, that's why I have used display.
– Saif Ur Rahman
Jun 29 at 16:46

display

@connexo updated.
– Saif Ur Rahman
Jun 29 at 19:09

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

#div1

mouseDown

#div2

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

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

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

Nice solution but from what the OP described they want to click, not hold the mouse down, to show the second div
– j08691
Jun 29 at 16:06

you can do it in the following way too.



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


div1

div2

OP's using visibility, not display.
– connexo
Jun 29 at 16:35

visibility

display

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

checkbox hack

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:

state

state

:checked

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







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

sibling

+

~

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

Thank you for this addition!
– Chenius
Jun 30 at 8:39

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>
https://code.jquery.com/jquery-3.1.0.js
</head>
<body>


Div 1

Div 2

</body>
</html>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.