Question

I want to toggle a div element (expand/collapse) when clicked.
I have many div elements, on click to new element, I want to collapse the previous one and expand the current clicked one.

I tried using static type variable to save the instance of previous div tag and compared with the current selection, but I don’t know why is it not working.

Searching about this, I got similar code idea to collapse all div and then expand the current selected only, but I want to just toggle the previous one with new one, not collapse all div and expand the selected (though I would be using it if other way is not possible)

Can it be done using static variables of js?

Answer 1

At its simplest, you can simply do something like this:

var divs = document.getElementsByTagName('div'),
    collapseClass = 'collapsed',
    current = divs[0];

// Hide all elements except first, add click event hander
for(var i = 0, len = divs.length; i < len; i++){
    divs[i].onclick = function(){
        if(this !== current){
            toggle(this, current);
            current = this;
        }
    };

    if(i > 0) toggle(divs[i]);
}

This will store the current element in a variable, then toggle it when another element is clicked. It also uses an if statement to check if the currently clicked element is the one currently visible element, and only toggles if its not.

See a working demo of this here: http://jsfiddle.net/GaxvM/