Sub-Tables in Bootstrap

Question

I’m creating a conventional table, which when clicked on in the group name it shows a sub-table containing the same columns and refactoring the results:

NORMAL STATE:

 GRUPOS    QUANTIDADE
|  GA   |  |  1000  |
|  GB   |  |  1600  |

WHEN CLICKED ON THE GROUP TITLE:

 GRUPOS    QUANTIDADE
|  GA   |  |  1000  |
| CLI01 |  |  500   |
| CLI02 |  |  500   |

|  GB   |  |  1600  |
| CLI01 |  |  800   |
| CLI02 |  |  800   |

FROM A TABLE STRUCTURE BELOW, WHAT IS NECESSARY TO APPLY IN ORDER FOR THE SUB-TABLES TO APPEAR AND FOR THEM TO HAVE THIS 'SHOW/HIDE' EFFECT'?

  <table class="table table-striped">
    <thead>
      <tr>
        <th>GRUPOS</th>
        <th>QUANTIDADE</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>GA</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>GB</td>
        <td>1600</td>
      </tr>
    </tbody>
  </table>

Answer 1

I don’t know if you want a treetable, but it will follow the same context.

$('ul li span').on('click', function(){
        $('.show').slideToggle();
});

.show{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
        <li>
            <span>A</span>
            <div class="show">VVVV</div>
              
        </li>
    </ul>

Follow this example, if it doesn’t work, or whatever you want, post your current code, which we start from it.