HTML / Javascript - Expand and collapse table rows (childs) by clicking on a parent row

Question

I am trying to solve one issue since days and finally understood that I will not succeed without help ... I want to do a common thing that we see on internet everyday : be able

Answer 1

You will need to wrap each group of parent + children in a for this and use a small script to toggle a class name on this parent . Here's an example:

$('table').on('click', 'tr.parent .fa-chevron-down', function(){
  $(this).closest('tbody').toggleClass('open');
});

.parent ~ .cchild {
  display: none;
}
.open .parent ~ .cchild {
  display: table-row;
}
.parent {
  cursor: pointer;
}
tbody {
  color: #212121;
}
.open {
  background-color: #e6e6e6;
}

.open .cchild {
  background-color: #999;
  color: white;
}
.parent > *:last-child {
  width: 30px;
}
.parent i {
  transform: rotate(0deg);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  margin: -.5rem;
  padding: .5rem;
 
}
.open .parent i {
  transform: rotate(180deg)
}

    

        

            
Age
            
Sex
            
Name
            
From
        

        

        

            
100
            
M
            
Dodo
            
UK
            

        
        

            
10
            
M
            
Child
            
UK
        
        

            
10
            
M
            
Child
            
UK
        
        

            
10
            
M
            
Child
            
UK
        
        
        

        

            
100
            
M
            
Dodo
            
UK
            

        
        

            
10
            
M
            
Child
            
UK
        
        

            
10
            
M
            
Child
            
UK
        
        

            
10
            
M
            
Child
            
UK