HTML Collapsible Table Sections using CSS and JS
Question
All of this is sample code laid out identical to my actual code. Just shorter. I'm trying to get the subsections of the table to close separate of the main header sections. So, when you first go to the page it looks like this: Table with Main Headers & content collapsed
Then when you click on the header, I want it to open up with the subheaders and their content collapsed: Table Headers clicked with table subheaders collapsed
Then you can click on the subheadings to open the actual content: Table subheaders clicked with data shown
So far, I can get the main header sections to close. I just have no idea how to keep the subheaders collapsed when you click on the main headers.
Here is my .html:
<!DOCTYPE HTML>
<html>
<head>
<style>
.parent {cursor: pointer; background-color: rgba(234, 118, 86, 1.0);}
.parent ~ .child {display: none;}
.open .parent ~ .child {display: table-row;}
table {border-radius: 5px; margin-bottom: 2em;}
th {border: solid black; font-size: 28px; border-radius: 10px;}
td {border: solid black; font-size: 23px; border-radius: 5px; padding: .5em; background-color: rgba(234, 118, 86, 1.0);}
</style>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="table.js"></script>
</head>
<body>
<table>
<tbody>
<tr class="parent"><th colspan="3">Table Section 1</th></tr>
<tr class="child"><th colspan="3">Table Subsection 1</th></tr>
<tr class="child"><th>Name</th><th>Age</th><th>City</th></tr>
<tr class="child"><td>Lorem</td><td>Ipsum</td><td>Dolor</td></tr>
<tr class="child"><td>Sit</td><td>Amet</td><td>Consectetur</td></tr>
<tr class="child"><th colspan="3">Table Subsection 2</th></tr>
<tr class="child"><th>Name</th><th>Age</th><th>City</th></tr>
<tr class="child"><td>Adipiscing</td><td>Elit</td><td>Sed</td></tr>
<tr class="child"><td>Do</td><td>Eiusmod</td><td>Tempor</td></tr>
</tbody>
<tbody>
<tr class="parent"><th colspan="3">Table Section 2</th></tr>
<tr class="child"><th colspan="3">Table Subsection 1</th></tr>
<tr class="child"><th>Name</th><th>Age</th><th>City</th></tr>
<tr class="child"><td>Incididunt</td><td>Ut</td><td>Labore</td></tr>
<tr class="child"><td>Et</td><td>Dolore</td><td>Magna</td></tr>
<tr class="child"><th colspan="3">Table Subsection 2</th></tr>
<tr class="child"><th>Name</th><th>Age</th><th>City</th></tr>
<tr class="child"><td>Aliqua</td><td>Ut</td><td>Enim</td></tr>
<tr class="child"><td>Quis</td><td>Nostrud</td><td>Exercitation</td></tr>
</tbody>
</table>
</body>
</html>
And my .js file:
$(document).ready(function() {
$('table').on('click', 'tr.parent', function() {
$(this).closest('tbody').toggleClass('open');
});
}); // end ready
I've tried using the same code with the tbody tag and something like parent2, but it goes wonky instantly. Anybody have any good resources to help me out or know how I can get the subheaders to collapse?
1 answers
solution1
1 2020-09-28 09:07:11
You can use JQuery's nextUntil():
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!DOCTYPE HTML> <html> <head> <style> .parent {cursor: pointer; background-color: rgba(234, 118, 86, 1.0);} .parent ~ .child, .parent ~ .child2 {display: none;} .open .parent ~ .child, .child2.open {display: table-row;} table {border-radius: 5px; margin-bottom: 2em;} th {border: solid black; font-size: 28px; border-radius: 10px;} td {border: solid black; font-size: 23px; border-radius: 5px; padding: .5em; background-color: rgba(234, 118, 86, 1.0);} </style> <script> $(document).ready(function() { $('table').on('click', 'tr.parent', function() { $(this).closest('tbody').toggleClass('open'); }); $('table').on('click', 'tr.child', function() { $(this).nextUntil('.child').toggleClass('open'); }); }); </script> </head> <body> <table> <tbody> <tr class="parent"><th colspan="3">Table Section 1</th></tr> <tr class="child"><th colspan="3">Table Subsection 1</th></tr> <tr class="child2"><th>Name</th><th>Age</th><th>City</th></tr> <tr class="child2"><td>Lorem</td><td>Ipsum</td><td>Dolor</td></tr> <tr class="child2"><td>Sit</td><td>Amet</td><td>Consectetur</td></tr> <tr class="child"><th colspan="3">Table Subsection 2</th></tr> <tr class="child2"><th>Name</th><th>Age</th><th>City</th></tr> <tr class="child2"><td>Adipiscing</td><td>Elit</td><td>Sed</td></tr> <tr class="child2"><td>Do</td><td>Eiusmod</td><td>Tempor</td></tr> </tbody> <tbody> <tr class="parent"><th colspan="3">Table Section 2</th></tr> <tr class="child"><th colspan="3">Table Subsection 1</th></tr> <tr class="child2"><th>Name</th><th>Age</th><th>City</th></tr> <tr class="child2"><td>Incididunt</td><td>Ut</td><td>Labore</td></tr> <tr class="child2"><td>Et</td><td>Dolore</td><td>Magna</td></tr> <tr class="child"><th colspan="3">Table Subsection 2</th></tr> <tr class="child2"><th>Name</th><th>Age</th><th>City</th></tr> <tr class="child2"><td>Aliqua</td><td>Ut</td><td>Enim</td></tr> <tr class="child2"><td>Quis</td><td>Nostrud</td><td>Exercitation</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.