在Div内单击时隐藏Div

Question

I have this code that when you click on something, a hidden div appears, but the only way to get the div to disappear is to click outside of it. I was wondering if there was a way to make it so that you're able to click the div itself to make it disappear.

Java:

function toggle() {
var ele = document.getElementById("about");
//var text = document.getElementById("displayText");
if(ele.style.display == "block") {
    ele.style.display = "none";
    //text.innerHTML = "show";
}
else {
    ele.style.display = "block";
    //text.innerHTML = "hide";
}
}

CSS:

#about {height: 100%; width: 100%; background: rgba(0, 0, 0, 0.6); position: fixed; bottom: 0px; left: 0px;}

HTML:

<a id="displayText" href="javascript:toggle();"><img src="http://companionplants.com/images/small-plant2.jpg"></a>

<div id="about" style="display: none;">
Text here
</div>

Answer 1

You can just add the same toggle call on the div overlay itself:

<div id="about" onclick="toggle()" style="display: none;">Text here</div>

jsFiddle example

Answer 2

Add an onclick function.

HTML:

<div id="mainDiv">
    testing
</div>

JavaScript:

var mainDiv = document.getElementById('mainDiv');

mainDiv.style.cursor = 'pointer';
mainDiv.onclick = function() {
    mainDiv.style.display = "none";
}

jsfiddle sample

If you want to alternative between two dividers, then see this example .