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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <table class='imagetable' align='center'> <caption><b></b></caption> <tbody class="labels"> <tr> <td class='expandFRED' colspan='7'>Values 1 (click here to expand/collapse) </td> </tr> </tbody> <tbody class="hide"> <tr> <td class='expandSUB1 expandVALS'>Category 1 (click here to expand/collapse) </td> <td class='expandSUB1'></td> <td class='expandSUB1' align='right'>$461.11 </td> <td class='expandSUB1'></td> <td class='expandSUB1' align='right'>$428.33</td> <td class='expandSUB1' align='right'>-7.11% </td> <td class='expandSUB1' align='right'>$-32.78</td> </tr> <tr> <td class='expandCAT1'> SubValue 1</td> <td class='expandCAT1' align='right'>0.405582</td> <td class='expandCAT1'></td> <td class='expandCAT1' align='right'>0.405582</td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> </tr> <tr> <td class='expandCAT1'> SubValue 2</td> <td class='expandCAT1' align='right'>1</td> <td class='expandCAT1'></td> <td class='expandCAT1' align='right'>1</td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> </tr> <tr> <td class='expandCAT1'> SubValue 3</td> <td class='expandCAT1' align='right'>1.392379</td> <td class='expandCAT1'></td> <td class='expandCAT1' align='right'>1.407569</td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> </tr> </tbody> </table> </body> </html>
2 answers
solution1
1 2018-10-08 08:03:10
Hi in my little knowledge you should toggle the hide class in expandFRED class click event for toggle the whole table below is the total code
Please you apply your css
$(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(); }); $(".expandFRED").click(function() { $(".hide").toggle(); }); })
.imagetable { border: 1px solid black; } .label tr td label { display: block; border: 1px solid black; } td { border: 1px solid black; } [data-toggle='toggle'] { display: block; } /*.expandSUB1 { display: block; } .expandFRED { display: block; } .expandCAT1 { display: block; }*/
<table class='imagetable' align='center'> <caption><b></b></caption> <tbody class="labels"> <tr> <td class='expandFRED' colspan='7'> Values 1 (click here to expand/collapse) </td> </tr> </tbody> <tbody class="hide"> <tr> <td class='expandSUB1 expandVALS'> Category 1 (click here to expand/collapse) </td> <td class='expandSUB1'></td> <td class='expandSUB1' align='right'> $461.11 </td> <td class='expandSUB1'></td> <td class='expandSUB1' align='right'>$428.33</td> <td class='expandSUB1' align='right'> -7.11% </td> <td class='expandSUB1' align='right'>$-32.78</td> </tr> <tr> <td class='expandCAT1'> SubValue 1</td> <td class='expandCAT1' align='right'>0.405582</td> <td class='expandCAT1'></td> <td class='expandCAT1' align='right'>0.405582</td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> </tr> <tr> <td class='expandCAT1'> SubValue 2</td> <td class='expandCAT1' align='right'>1</td> <td class='expandCAT1'></td> <td class='expandCAT1' align='right'>1</td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> </tr> <tr> <td class='expandCAT1'> SubValue 3</td> <td class='expandCAT1' align='right'>1.392379</td> <td class='expandCAT1'></td> <td class='expandCAT1' align='right'>1.407569</td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> </tr> </tbody> </table>
solution2
0 ACCPTED 2018-10-08 09:25:56
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; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <table class='imagetable table' align='center'> <caption><b></b></caption> <tbody class="labels"> <tr> <td class='expandFRED' colspan='7'>Values 1 (click here to expand/collapse) </td> </tr> </tbody> <tbody class="hide"> <tr> <td class='expandSUB1 expandVALS'>Category 1 (click here to expand/collapse) </td> <td class='expandSUB1'></td> <td class='expandSUB1' align='right'>$461.11 </td> <td class='expandSUB1'></td> <td class='expandSUB1' align='right'>$428.33</td> <td class='expandSUB1' align='right'>-7.11% </td> <td class='expandSUB1' align='right'>$-32.78</td> </tr> <tr> <td class='expandCAT1'> SubValue 1</td> <td class='expandCAT1' align='right'>0.405582</td> <td class='expandCAT1'></td> <td class='expandCAT1' align='right'>0.405582</td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> </tr> <tr> <td class='expandCAT1'> SubValue 2</td> <td class='expandCAT1' align='right'>1</td> <td class='expandCAT1'></td> <td class='expandCAT1' align='right'>1</td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> </tr> <tr> <td class='expandCAT1'> SubValue 3</td> <td class='expandCAT1' align='right'>1.392379</td> <td class='expandCAT1'></td> <td class='expandCAT1' align='right'>1.407569</td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> <td class='expandCAT1'></td> </tr> </tbody> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
expand collapse table in html not working
Expand / Collapse HTML Table by Table Header
How to expand/collapse html table with partial view?
How to Expand and Collapse in HTML5 table
Expand and Collapse of 3 level hierarchical rows in html table
Expand and Collapse HTML Table Data Rows
Expand collapse text with html
Expand / Collapse HTML Tables
Expand/Collapse Table row
Expand and collapse in table row
Related Tags