HTML / Javascript - expand and collapse table rows (children) by clicking on the parent row
I've been trying to solve one problem since then, and finally realized that I couldn't do it without help ... I want to do the usual thing we see on the Internet every day: be able to click on a row in a table to show more details. But here more details don't mean a block of text, but child lines, which have the same shape as the parent lines.
Here is an example HTML table:
<table class="collapse table">
<tr>
<th>Age</th>
<th>Sex</th>
<th>Name</th>
<th>From</th>
</tr>
<tr class="parent">
<td>100</td>
<td>M</td>
<td>Dodo</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="parent">
<td>100</td>
<td>M</td>
<td>Dodo</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
The number of children and parents is flexible, I would like to give an example of flexibility with this trait. Child lines should be closed when the page is loaded and only expand if the user clicks on the parent. If that is also possible, I would like to add an icon that tells the user to click on the line (mostly "+" and "-"), but not a simple line, a real icon.
I have seen and followed many examples but none of them did the job perfectly and tried to change the examples ... no success. Most of them were examples based on Datatables and I don't want to use it.
Can you help me? I know my question is pretty complete and I'm asking for most of the work, but haven't found a complete example to do what I want using only HTML, CSS, Javascript.
Thank.
Edit following Andrei Georgiou's answer:
I would like to finally only click on the icon and not the whole row, I have other buttons on the same row and if I click on it it activates the child opening. So what I did, expecting a better solution:
HTML: Change "tr" to a specific class "td" and add an icon string to that class "td.toto".
JS:
$('table').on('click', 'td.toto', function(){
console.log("Check click works: ");
$(this).closest('tbody').toggleClass('open');
});
So, is it possible to follow the structure of your solution but only change the click target? The best solution I had in mind is to click on the icon only, not the whole "td".
Thank.
source to share
You will need to wrap each parent + child group in <tbody>
for this, and use a little script to switch the class name to this parent <tbody>
. 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)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container">
<table class="table">
<tr>
<th>Age</th>
<th>Sex</th>
<th>Name</th>
<th colspan="2">From</th>
</tr>
<tbody>
<tr class="parent">
<td>100</td>
<td>M</td>
<td>Dodo</td>
<td>UK</td>
<td><i class="fa fa-chevron-down"></i></td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td colspan="2">UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td colspan="2">UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td colspan="2">UK</td>
</tr>
</tbody>
<tbody>
<tr class="parent">
<td>100</td>
<td>M</td>
<td>Dodo</td>
<td>UK</td>
<td><i class="fa fa-chevron-down"></i></td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td colspan="2">UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td colspan="2">UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td colspan="2">UK</td>
</tr>
</tbody>
</table>
</div>
source to share