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.

.jpg

.jpg

Oh, and my current code for the javascript portion (dog, halloween, and edy 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 edy()
{
td31 = document.getElementById('td1');
td31.parentNode.removeChild(td31);

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

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

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./ijFBpWavY386c.jpg

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

Oh, and my current code for the javascript portion (dog, halloween, and edy 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 edy()
{
td31 = document.getElementById('td1');
td31.parentNode.removeChild(td31);

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

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

• javascript

• As I'm still new to javascript, I don't really have an idea of what to try. I searched for what I put in the title (and slight variations) on Google and here, but couldn't find anything related. – Broodyr Commented Nov 7, 2012 at 18:33

4 Answers 4

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 edy() {
    if (allColumns) {
        // ... do stuff here ...
        allColumns = false;
    } else {
        // ... do different stuff here ...
        allColumns = true;
    }
}

Something like this would be pretty straightforward:

// Put this within the scope of the <a /> below...
var whichClick = 1;

// The link
<a href="..." onclick="javascript:doSomething(whichClick++ % 2 == 1)">Click Me</a>

// The handler
function doSomething(isOdd){
    // isOdd is true or false, respond accordingly
}

Etc.

EDIT Tweaked to make function arg a boolean

Cheers

if you are using jquery, you can do something like this:

function bindImageClick(){    
    $("#imgid").unbind("click");
    $("#imgid").bind("click", function (event) {
        alert("first click");
        $(this).unbind("click");
        $(this).bind("click", function(){
           alert("second click");
           bindImageClick();
        });
    });
}
bindImageClick();

Live example here: http://jsfiddle/4zKNJ/3/

Its simply, See fiddle demo

HTML

<table>
<tr>
    <td>Column1</td>
    <td id="click">Column2</td>
    <td>Column3</td>
</tr>
</table>

CSS:

td{
  border:1px dotted #ccc;
  width:50px
 }

JQUERY

$(document).ready(function(){
  $("#click").toggle(
   function(){
     $(this).css('width',200).siblings().hide();;
   },
   function(){
     $(this).css('width',50).siblings().show();;
   }
  );
})