expand collapse treenode using jquery

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 plu开发者_如何学运维s 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.

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'});
});