Question

I have 3 columns in a table, each with some text at the top and an image below it. I have it so that when someone clicks an image from one of the 3 columns, it enlarges the column, and deletes the other columns using an onClick event. However, I want it so that when I click the image a second time, it brings back the other columns. The problem I’m having is figuring out how to make the onClick event do something different the second time I click it. I’ve added a couple of (poorly) drawn pictures to help give you an idea. Thanks for your time.

http://i.minus.com/ijFBpWavY386c.jpg

http://i.minus.com/iNExaX8dsN5dK.jpg

Oh, and my current code for the javascript portion (dog, halloween, and comedy are the ID’s of each image. And please excuse my terrible (non-existant) indenting; still in a class to learn javascript.):

function dog()
{
td12 = document.getElementById('td2');
td12.parentNode.removeChild(td12);

td13 = document.getElementById('td3');
td13.parentNode.removeChild(td13);

td11 = document.getElementById('td1');
td11.style.textAlign = "center";
}
function halloween()
{
td21 = document.getElementById('td1');
td21.parentNode.removeChild(td21);

td23 = document.getElementById('td3');
td23.parentNode.removeChild(td23);

td22 = document.getElementById('td2');
td22.style.textAlign = "center";
}
function comedy()
{
td31 = document.getElementById('td1');
td31.parentNode.removeChild(td31);

td32 = document.getElementById('td2');
td32.parentNode.removeChild(td32);

td33 = document.getElementById('td3');
td33.style.textAlign = "center";
}

Answer 1

What you need is a variable that is accessible to all your functions which will tell you what ‘mode’ your table is in:

var allColumns = true;

function comedy() {
    if (allColumns) {
        // ... do stuff here ...
        allColumns = false;
    } else {
        // ... do different stuff here ...
        allColumns = true;
    }
}