HTML / Javascript - Expand and collapse table rows (childs) by clicking on a parent row

Question

I am trying to solve one issue since days and finally understood that I will not succeed without help ... I want to do a common thing that we see on internet everyday : be able to click on a table row in order to show more details. But here more details does not mean a block of text but child rows which have same shape as parent rows.

Here is an example of 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 child and parent is flexible, I would like a example which manage flexible with that characteristic . Child rows will have to be closed when the page is load, and expand only if the user click on the parent one. If it is also possible I would like to add an icon which indicates to user the ability to click on a row ( basically a "+" and a "-" ), but not a simple string, a real icon.

I have seen and followed many examples, but no one of them did the job perfectly and tried to modify examples ... no success. Most of them were examples based on Datatables and I do not want to use it.

Can you help me please ? I know that my question is quite full and I am asking for a big part of work, but did not find a complete example to do what I want using HTML,CSS,Javascript only.

Thank you.

Edit after Andrei Gheorghiu's answer :

I would like finally being able to click only on the icon rather than on the entire row, I have others buttons on the same row, and if I click on, it actives the child opening. So what I did, waiting a better solution :

HTML : Changing "tr" to a specific "td" class and add the icon line within this "td.toto" class.

JS :

$('table').on('click', 'td.toto', function(){
  console.log("Check click works: ");
  $(this).closest('tbody').toggleClass('open');
});

So is it possible to follow your solution structure, but only change the click target ? By better solution, I meant, to click only on the icon rather than on the entire "td" now.

Thank you.

tao · Accepted Answer · 2017-04-10T12:59:08.157

You will need to wrap each group of parent + children in a <tbody> for this and use a small script to toggle a class name on 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>

Sorry for my late answer, I am going to try it today and will let you know if it does the work. Thank you. — C.Brn, Apr 10 '17 at 08:27
Thank you a lot Andrei, I am almost perfectly happy with your solution. I did not think about one issue by giving my general example, I gave you some explications on my edited post, can you help me with ? @AndreiGheorghiu — C.Brn, Apr 10 '17 at 12:49
@C.Brn: if you want the toggling to only happen when the arrow is clicked, change `'tr.parent'` to `'tr.parent .fa-chevron-down'` in the jQuery code I provided. Updated the answer. You might also want to increase the padding on it (it's quite small now - hard to click). Use `.parent i {margin: -.5rem;padding:.5rem}` for that. — tao, Apr 10 '17 at 12:53
Whaou, I did not know it was possible to correct it so easily. Thank you so much for your help. Seems to works perfectly without any click bugs. About your css corrections, it was fine but thank your for these further informations. — C.Brn, Apr 10 '17 at 12:58
It's just languages, @C.Brn. Once you speak them, they make sense. You'll get there. Re-reading your edit to the answer, yes, your proposed selector would have worked, but keeping the `.parent` part (you only want this when it's inside a `.parent`) :) Happy coding! — tao, Apr 10 '17 at 13:01
@tao is it possible to integrate nested collapsible rows with your answer? As in, a collapsible row that has multiple collapsible rows inside. — JoaoBM, Mar 23 '21 at 20:27

HTML / Javascript - Expand and collapse table rows (childs) by clicking on a parent row

1 Answers1

Linked