dhtmlgoodies - Folder tree with Drag and Drop capabilities - multiple trees

Collapse all TREE 2 | Expand all TREE 2
Collapse all TREE 1 | Expand all TREE 1

How to adapt from original script

  1. Create 2nd instance of tree with UNIQUE ids for all the elements.
  2. Modify the links that expand and collapse the trees, adding the exact name of each main tree divs
    <a href="#" onclick="treeObj.collapseAll('dhtmlgoodies_tree2')">Collapse all TREE 1</a> | 
    <a href="#" onclick="treeObj.expandAll('dhtmlgoodies_tree2')">Expand all TREE 1</a>
    
    <a href="#" onclick="treeObj.collapseAll('dhtmlgoodies_tree3')">Collapse all TREE 2</a> | 
    <a href="#" onclick="treeObj.expandAll('dhtmlgoodies_tree3')">Expand all TREE 2</a>
    	
  3. Initiate this 2nd instance in the same way as the first one, changing the id names
    		<script type="text/javascript">	
    treeObj = new JSDragDropTree();
    treeObj.setTreeId(<font size='2'><strong>'dhtmlgoodies_tree2'</strong></font>);
    treeObj.setMaximumDepth(7);
    treeObj.setMessageMaximumDepthReached('Maximum depth reached'); 
    treeObj.initTree();
    treeObj.expandAll(<font size='2'><strong>'dhtmlgoodies_tree2'</strong></font>);
    
    treeObj = new JSDragDropTree();
    treeObj.setTreeId(<font size='2'><strong>'dhtmlgoodies_tree3'</strong></font>);
    treeObj.setMaximumDepth(7);
    treeObj.setMessageMaximumDepthReached('Maximum depth reached');
    treeObj.initTree();
    treeObj.expandAll(<font size='2'><strong>'dhtmlgoodies_tree3'</strong></font>);
    </script>
    
  4. The last step is to modify the "expandAll" and "collapseAll" functions in the "drag-drop-folder-tree.js" within the "js" folder. Find the functions:
    	expandAll : function()
    {
      var menuItems = document.getElementById(this.idOfTree).getElementsByTagName('LI');
      for(var no=0;no<menuItems.length;no++){
        var subItems = menuItems[no].getElementsByTagName('UL');
        if(subItems.length>0 && subItems[0].style.display!='block'){
          JSTreeObj.showHideNode(false,menuItems[no].id);
        }         
      }
    }   
    ,
    collapseAll : function()
    {
      var menuItems = document.getElementById(this.idOfTree).getElementsByTagName('LI');
      for(var no=0;no<menuItems.length;no++){
        var subItems = menuItems[no].getElementsByTagName('UL');
        if(subItems.length>0 && subItems[0].style.display=='block'){
          JSTreeObj.showHideNode(false,menuItems[no].id);
        }         
      }      
    }
    	
    and replace with this:
    	expandAll : function(nameOfTree)
    {
      var menuItems = document.getElementById(nameOfTree).getElementsByTagName('LI');
      for(var no=0;no<menuItems.length;no++){
        var subItems = menuItems[no].getElementsByTagName('UL');
        if(subItems.length>0 && subItems[0].style.display!='block'){
          JSTreeObj.showHideNode(false,menuItems[no].id);
        }         
      }
    }
    ,
    collapseAll : function(nameOfTree)
    {
      var menuItems = document.getElementById(nameOfTree).getElementsByTagName('LI');
      for(var no=0;no<menuItems.length;no++){
        var subItems = menuItems[no].getElementsByTagName('UL');
        if(subItems.length>0 && subItems[0].style.display=='block'){
          JSTreeObj.showHideNode(false,menuItems[no].id);
        }         
      }      
    }  
    	
    Here we have basically replaced the referece to the folder tree which was done by id to it's exact name.

 Are My Sites Up?  ServWise - Low cost, reliable and fast hosting with 24/7 support