Making Div Hide after its been shown - html

Question

So I have it so far when you click on an image it shows a Div. I just need it so that when you click on the image again and the div is being shown then it will hide.
Here is my code:
Style and script
<style type="text/css">
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript">
function showImg()
{
var obj=document.getElementById('calcShow');
obj.className = 'show';
}
</script>
Here is the HTML
<li data-value="iconchange"><img src="modules/icons/icons/calculator.png" width="65" onclick = "showImg()" class="calculator"></li>
And the Div
<div id="calcShow" class="hide"><br><br><br>
<?php
include("modules/calc/calc.html");
?>
</div>

Answer 1

What you want to do is create a conditional that checks whether the <div> is currently shown or not. Depending on the visibility, change the class that's associated to the <div>:
function toggleImg() {
var obj = document.getElementById('calcShow');
if (obj.className == 'show') {
obj.className = 'hide';
}
else if (obj.className == 'hide') {
obj.className = 'show';
}
}
.show {
display: block;
}
.hide {
display: none;
}
<div id="calcShow" class="hide">Hidden</div>
<br />
<img src="http://placehold.it/100" onclick="toggleImg()">
Note that you don't actually have to use classes for this, as this can be done directly through the .style.display property:
function toggleImg() {
var obj = document.getElementById('calcShow');
if (obj.style.display == 'none') {
obj.style.display = 'block';
}
else if (obj.style.display == 'block') {
obj.style.display = 'none';
}
}
<div id="calcShow" style="display: block">Hidden</div>
<br />
<img src="http://placehold.it/100" onclick="toggleImg()">
Hope this helps! :)

Answer 2

Solution with Jquery:
HTML:
<li data-value="iconchange"><img src="modules/icons/icons/calculator.png" width="65" class="calculator"></li>
The DIV:
<div id="calcShow"><br><br><br>
<?php
include("modules/calc/calc.html");
?>
</div>
The Function:
$('.calculator').click(function{
var isvisible = $('#calcShow').is(":visible");
if(isvisible == true){
$('#calcShow').hide();
}
else{
$('#calcShow').show();
}
})

Answer 3

This is basically one of the easiest way using pure javascript,
function showImage(){
var obj = document.getElementById('calcShow');
if(obj.style.display !== "block"){
obj.style.display = "block";
}else{
obj.style.display = "none";
}
}

Answer 4

Instead of creating separate functions for showing and hiding the image, you could create a function that toggles the value. You can use the ternary operator to decide whether you want to set the className to show or hide.
The ternary operator works like so, condition ? ifTrue : ifFalse.
The condition will be obj.className === "show". If this is true, then it should switch from its current value of "show" to a value of "hide". However, if it's false, then it's current value is "hide" and so its new value should be set to "true".
function showOrHide() {
var obj = document.getElementById('calcShow');
obj.className = (obj.className === "show" ? "hide" : "show");
}
Then you can simply set the onClick attribute to call this function.