How to create a collapsing tree table in html/css/js?

Question

I have some data to display that is both tabular and hierarchical. I\'d like to let the user be able to expand and collapse the nodes.

Sort of like this, except func

Answer 1

jquery is your friend here.

http://docs.jquery.com/UI/Tree

If you want to make your own, here is some high level guidance:

Display all of your data as

elements with the inner data as nested
, and then use the jquery:

$('.ulClass').click(function(){ $(this).children().toggle(); });

I believe that is correct. Something like that.

EDIT:

Here is a complete example.

    
    
    

                                                                                                                                                                                

    
item 1

        
item 1
        
item 2

            
item 1
            
item 2
            
item 3
            
item 4
        
        
        
item 3
        
item 4

            
item 1
            
item 2
            
item 3
            
item 4
        
        
    
    
    
item 2

        
item 1
        
item 2
        
item 3
        
item 4
    
    
    
item 3

        
item 1
        
item 2
        
item 3
        
item 4
    
    
    
item 4