Cognos Tree View

On the top of the page:
<script>
//var count=1;
//  These settings you can change to modify the report processing
var UOM="px";       // Set to unit of measure for padding
var INDENT_SIZE=15;     // Set to indent padding step size.  i.e setting to 20 means the padding steps are 20,40,60,80, etc

var UOM_SIZE = UOM.length;

function stripTrailing(string,num) {
    if ( string == "") {return parseInt(0);} else {return parseInt(string.substring(0,string.length-num));}
}

function ExpandCollapse( el )
{
    // Grab the ROW that was clicked and the TABLE that contains it

    var tr = el.parentElement.parentElement;
    var tbl = tr.parentElement.parentElement;

    // Set the alternating display values for hiding/showing the row

    var sDisplay = ( el.src.indexOf( "minus" ) == -1 ) ? "" : "none";
    var sDisplayReverse = ( el.src.indexOf( "minus" ) == -1 ) ? "none" : "";

    //Switch the icon for the clicked row

    el.src = "../Webfiles/ProjectFolder/PropertyGroup_" + ( el.src.indexOf( "minus" ) == -1 ? "minus" : "plus" ) + ".gif";

    // Starting with the row below the clicked row, start checking each row

    for ( var i = tr.rowIndex + 1; i < tbl.rows.length; i++ )
    {

        // Set the Current row indicator nad the left padding value
        var trCurrent = tbl.rows( i );
        var trCurrentLeft = trCurrent.cells(0).style.paddingLeft;

    /*  if(tbl.rows(i+1)){
            if(tbl.rows(i+1).cells(0).style.paddingLeft < trCurrentLeft+1){
                trCurrent.cells(0).getElementsByTagName("IMG").item(0).src = "../Webfiles/ProjectFolder/blank.gif";
                trCurrent.cells(0).getElementsByTagName("IMG").item(0).onclick = "javascript: void(null);";
                trCurrent.cells(0).getElementsByTagName("IMG").item(0).style.cursor = "point";
            }
        }*/

        // if the current row contains an IMG in it, it's a clickable level and we either have to stop processing,
        //     or reset the icons to a + as it's being collapsed
        if ( trCurrent.cells( 0 ).firstChild && trCurrent.cells( 0 ).getElementsByTagName( "IMG" ).length )
        {


            // If the current row is at the same level or above in the tree, then stop processing,
            //    else reset all the signs below it, essentially collapsing all branches underneath the one that is beig collapsed.

            if (  stripTrailing(trCurrentLeft , UOM_SIZE) <= stripTrailing(tr.cells(0).style.paddingLeft , UOM_SIZE) )
            { break; }
            else
            {
                if (el.src.indexOf( "minus" ) == -1 )
                {
                    trCurrent.cells(0).getElementsByTagName("IMG").item(0).src = "../Webfiles/ProjectFolder/PropertyGroup_plus.gif";
                }
            }
        }

        // Now, we determine if the row should be hidden or shown.
        if ( eval(stripTrailing(tr.cells(0).style.paddingLeft, UOM_SIZE)+ INDENT_SIZE) < stripTrailing(trCurrentLeft, UOM_SIZE) && el.src.indexOf( "minus" ) >0 )
        {
            trCurrent.style.display = sDisplayReverse;
        } else
        {
            trCurrent.style.display = sDisplay;
        }
    }
}


function StartHidden(el){
 var tbl=el.parentElement.parentElement.parentElement.parentElement;
 var topo=document.getElementById("topo");
 for (var i = 0; i < tbl.rows.length; i++){
  var trCurrent = tbl.rows(i);
  if (trCurrent.cells(0).style.paddingLeft.indexOf(UOM) > -1){
   trCurrent.style.display = "none";
  }
 }
 el.src= "../Webfiles/ProjectFolder/PropertyGroup_plus.gif";
topo.src = "../Webfiles/ProjectFolder/PropertyGroup_plus.gif";
}


function ShowAll(el){
 var tbl=el.parentElement.parentElement.parentElement.parentElement;
 var topo=document.getElementById("topo");

 for (var i = 0; i < tbl.rows.length; i++){
    var trCurrent = tbl.rows(i);

    if (trCurrent.cells(0).style.paddingLeft.indexOf(UOM) > -1){
        //if(trCurrent.cells(0).innerHTML != "")
        //{
            trCurrent.style.display = "";
        trCurrent.cells(0).getElementsByTagName("IMG").item(0).src = "../Webfiles/ProjectFolder/PropertyGroup_minus.gif";
        //}


    }

 }

el.src= "../Webfiles/ProjectFolder/PropertyGroup_minus.gif";
topo.src = "../Webfiles/ProjectFolder/PropertyGroup_minus.gif";

}






/*
if(count == 1){
    StartHidden(document.getElementById("imgHidden"));
    count++;
}*/
</script>

For top row of the table, create 2 HTML Itens:
//First
<img onclick='(this.src.indexOf("_plus")!=-1)?ShowAll(this):StartHidden(this)' src='../Webfiles/ProjectFolder/PropertyGroup_minus.gif' style='cursor:hand; vertical-align:middle; margin-right:2px' /> Colapse/Expand All</br><hr>

//Secound
<img id='topo' name='topo' onclick='ExpandCollapse(this)' src='../Webfiles/ProjectFolder/PropertyGroup_minus.gif' style='cursor:hand; vertical-align:middle; margin-right:2px'/>

For every row on the table:
<img onclick='ExpandCollapse(this)' src='../Webfiles/ProjectFolder/PropertyGroup_minus.gif' style='cursor:hand; vertical-align:middle; margin-right:2px'/>