Input image on click function open, on click again function closes

Question

I've read through similar questions' answers but most are jQuery answers. I'm using JavaScript only to do this so if someone could help me fix my problem would be great.

So far in my js when my input image is clicked my function displays a box. I want to be able to click this input image again to close the box. At the moment I can't close it by clicking the image.

Here is my js:

var settings = document.getElementById('cog');
settings.onclick = Cog;


function Cog(){
document.getElementById('settings').style.display = "block";
document.getElementById('cogbox').style.display = "block";
}

'cog' is my image and clickable input. What code am I missing to make the box close by clicking the 'cog' image?

Answer 1

is there any reason your not using library? if you're going to be doing a lot of JS, Mootools or JQuery will help you out a lot. Jquery is easier to learn though Mootools is way more flexible. For your problem, you're only really giving it the ability to show, though nothing else. try using a conditional statement like the one shown here: Toggle Html with JS

That should get you where you need to be.

Answer 2

I believe you just need a variable to check if you should show or hide the box. Check if this works:

var settings = document.getElementById('cog');
settings.onclick = Cog;

var cogShow = false;
function Cog(){
    cogShow = !cogShow;
    document.getElementById('settings').style.display = (cogShow ? "block" : "none");
    document.getElementById('cogbox').style.display = (cogShow ? "block" : "none");
}

Or you could simplify it even more, by checking if cogbox is visible and them doing the opposite to the object when clicking again:

var settings = document.getElementById('cog');
settings.onclick = Cog;

function Cog(){
    show = (document.getElementById('cogbox').style.display === "none");
    document.getElementById('cogbox').style.display = (show ? "block" : "none");
    document.getElementById('settings').style.display =  (show ? "block" : "none");
}