Question

I am making tree with the help of jquery in the tree whenever there is more than one child for a particular child i want to gave a toggle effect.it means that there should be a plus icon on click of it tree should expand and minus image should come on click of minus tree should collapse and plus image should come.

how to develop this any working example of tree node will be helpful

In this manner i have used your function

function createSpanImageNode(spnNew) {
    var spnImage = document.createElement("span");
    spnImage.id = spnNew + "_" + "spn1";
    $(spnImage).addClass('SpanPlus');
    spnImage.setAttribute('onclick', 'toogleNode("' + spnImage.id + '")');
    return spnImage;
}

function toogleNode(spnID) {
        debugger;
        var dv = $("#" + spnID).parents("div:first");
        var chkUl = $(dv).find('ul').length;
        if (chkUl.length > 0) {
            if ($("#" + spnID).hasClass('SpanPlus'))
                $("#" + spnID).removeClass('SpanPlus').addClass('SpanMinus');
            else
                $("#" + spnID).removeClass('SpanMinus').addClass('SpanPlus');
            $(dv).find('ul').animate({ height: 'toggle' });
        }
    }

But when it gets chkul value 1 it means it has to go inside the if
loop but it did not go inside i dont why can you tell me.

Answer 1

I’m not sure about your tree structure but you can use something like this.

$(img.handle).click(function(){
    if($(this).hasClass('plus'))
        $(this).removerClass('plus').addClass('minus');
    else
        $(this).removerClass('minus').addClass('plus');
    $(this).find('child').animate({height: 'toggle'});
});