Expand & collapse HTML table

Question

Disclaimer: I am a HTML, javascript and CSS novice.

What I am trying to do is have an expandable/collapsible HTML table as shown below. Clicking on "Values 1" should display "Category 1" (there are other categories but to minimise the code I have only displayed 1 category). Then clicking on "Category 1" will display further SubValues. The problem is when clicking on "Values 1" it only hides "Category 1" while still displaying the SubValues. Any ideas how I can easily change this with minimal code changes so that clicking on Values 1 hides both Category 1 and the SubValues. Note that there are also more Categories and SubValues so would also need them hidden.

Ideally, clicking "Values 1" should hide all Categories and SubValues, while clicking it again should restore the Categories and SubValues to whatever state they were, either hidden or visible.

Hopefully this makes sense. Thanks in advance

Collapsed:

Expanded (wrong):

Fully expanded:

< script src = "https://code.jquery.com/jquery-1.11.3.min.js" >
  $(document).ready(function() {
    $('[data-toggle="toggle"]').change(function() {
      $(this).parents().next('.hide').toggle();
    });
  });

$(document).ready(function() {
    $(".expandFRED").click(function() {
      $(".expandSUB1").toggle();
    });
    $(".expandVALS").click(function() {
      $(".expandCAT1").toggle();
    });
  }) <
  /script>

.label tr td label {
  display: block;
}

[data-toggle='toggle'] {
  display: none;
}

.expandSUB1 {
  display: none;
}

. {
  display: none;
}

.expandCAT1 {
  display: none;
}





  
    
    
      
        Values 1 (click here to expand/collapse)
        
      
    
    
      
        Category 1 (click here to expand/collapse)
        
        
        $461.11
        
        
        $428.33
        -7.11%
        
        $-32.78
      
      
              SubValue 1
        0.405582
        
        0.405582
        
        
        
      
      
              SubValue 2
        1
        
        1
        
        
        
      
      
              SubValue 3
        1.392379
        
        1.407569

Ahsan Khurshid · Accepted Answer

EDITED:

Replace with below code:

$(".expandFRED").click(function() {
  $('.hide').toggle();  
});
$(".expandVALS").click(function() {
  $(".expandCAT1").toggle();
});

CSS Change:

.hide {
  display: none;
}

and remove below:

.expandSUB1 {
   display: none;
}

$(document).ready(function() {
    $(".expandFRED").click(function() {
      $('.hide').toggle();  
    });
    $(".expandVALS").click(function() {
      $(".expandCAT1").toggle();
    });
  })

.hide {
  display: none;
}

.expandCAT1 {
  display: none;
}






  
    
    
      
        Values 1 (click here to expand/collapse)
        
      
    
    
      
        Category 1 (click here to expand/collapse)
        
        
        $461.11
        
        
        $428.33
        -7.11%
        
        $-32.78
      
      
              SubValue 1
        0.405582
        
        0.405582
        
        
        
      
      
              SubValue 2
        1
        
        1
        
        
        
      
      
              SubValue 3
        1.392379
        
        1.407569

Expand & collapse HTML table

Answers (2)

Related Questions

Expand &amp; collapse HTML table

Answers (2)

Related Questions

Expand & collapse HTML table