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

In modern browsers, you need only very little to code to create a collapsible tree :

var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
    tree[i].addEventListener('click', function(e) {
        var parent = e.target.parentElement;
        var classList = parent.classList;
        if(classList.contains("open")) {
            classList.remove('open');
            var opensubs = parent.querySelectorAll(':scope .open');
            for(var i = 0; i < opensubs.length; i++){
                opensubs[i].classList.remove('open');
            }
        } else {
            classList.add('open');
        }
        e.preventDefault();
    });
}

body {
    font-family: Arial;
}

ul.tree li {
    list-style-type: none;
    position: relative;
}

ul.tree li ul {
    display: none;
}

ul.tree li.open > ul {
    display: block;
}

ul.tree li a {
    color: black;
    text-decoration: none;
}

ul.tree li a:before {
    height: 1em;
    padding:0 .1em;
    font-size: .8em;
    display: block;
    position: absolute;
    left: -1.3em;
    top: .2em;
}

ul.tree li > a:not(:last-child):before {
    content: '+';
}

ul.tree li.open > a:not(:last-child):before {
    content: '-';
}

  
Part 1
    

      
Item A
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
      
Item B
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
      
Item C
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
      
Item D
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
      
Item E
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
    
  

  
Part 2
    

      
Item A
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
      
Item B
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
      
Item C
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
      
Item D
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
      
Item E
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
    
  

  
Part 3
    

      
Item A
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
      
Item B
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
      
Item C
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
      
Item D
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
      
Item E
        

          
Sub-item 1
          
Sub-item 2
          
Sub-item 3
        
      
    
  

(see also this Fiddle)