javascript image toggling

Question

I have a tree view which has a folder icon by default and once clicked it has to be changed to a checkbox icon. And further on clicking the checkbox icon should display a folder icon.

Sample Code:

---

Server side code: C#

htmlSb.AppendFormat("<li><span class=\"folder\"
   onclick=\"javascript:return Test.Controls.TreeView.SelectNode('"
   + this.Id
   + "',this);\">{0}</span></li>", emptyContent);

---

JavaScript code:

var Test= new Object();
Test.Controls=new Object();
Test.Controls.TreeView = new Object();

Test.Controls.TreeView.SelectNode = function (TreeId, nodeLabel) {
    $("#" + TreeId + " li span, ul li span").css("background-color", "transparent");
    nodeLabel.style.backgroundColor = "white";
    nodeLabel.style.background = "url(../images/selected.gif) 0 0 no-repeat";
}

---

The other Image :

if (nodeLabel.style.background = "url(../images/folderclosed.gif)  0 0 no-repeat")

I need to toggle between "selected.gif" and "folderclosed.gif" images. If one is clicked the other should display. and vice versa.

Please help.

Answer 1

Looks like you have jQuery available to you. This should do the trick:

// get a jquery object for the node label
var $nodeLabel = $(nodeLabel);

if ($nodeLabel.data('background') == '' || $nodeLabel.data('background') == 'folderclosed') {
  // if the node label has no background data set or is set to folderclosed, set to selected
  $nodeLabel.data('background', 'selected').css('background', 'url(../images/selected.gif) 0 0 no-repeat');
} else {
  // if the node label is set to selected, set to folderclosed
  $nodeLabel.data('background', 'folderclosed').css('background', 'url(../images/folderclosed.gif)  0 0 no-repeat');
}

Answer 2

sounds like the jQuery toggle function would be easiest since it's designed for just this.

http://api.jquery.com/toggle/