This is an example of code similar to what I am currently working on. I am trying to create collapsible subsections within a table, where the main headers can be opened separately from the subheaders. The goal is for the initial view of the page to display the table with all content collapsed like this: Table with Main Headers & content collapsed
Upon clicking on a main header, I want it to expand and show the associated subheaders and their content in a collapsed state like this: Table Headers clicked with table subheaders collapsed
Lastly, clicking on a subheader should reveal the actual data content like this: Table subheaders clicked with data shown
Currently, I am able to collapse and expand the main headers successfully. However, I am struggling to keep the subheaders collapsed when clicking on the main headers.
Below is my HTML code:
<!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 here is my JavaScript file:
$(document).ready(function() {
$('table').on('click', 'tr.parent', function() {
$(this).closest('tbody').toggleClass('open');
});
}); // end ready
I have attempted using similar code with the tbody tag and creating a new parent2 class without success. If anyone has any helpful resources or suggestions on how to achieve the collapsing behavior for the subheaders, it would be greatly appreciated!