Sub-tables in Bootstrap

Navigation
0

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

NORMAL STATUS: 

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

WHEN CLICKED ON 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 TO REACH SUB TABLES AND THAT THEY 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>
    
asked by anonymous 22.05.2017 / 16:59

1 answer

1

I do not know if you want to type 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><divclass="show">VVVV</div>
              
        </li>
    </ul>

Follow this example, if it does not work, or if you do not want to, post your current code, which we start with.

    
22.05.2017 / 17:08
Difference between CSS3 and CSS4 Finding time in mysql