JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td valign="top">Disciplines :</td>
<td>
<table>
<tr>
<td width="30" valign="top">
<input type="checkbox" name="Physics" />
</td>
<td width="200" valign="top">Physics
<table class="physicsTable" style="display:none;">
<tr>
<td width="30">
<input type="checkbox" name="Acoustics" />
</td>
<td width="200">Acoustics</td>
</tr>
<tr>
<td width="30">
<input type="checkbox" name="Cosmology" />
</td>
<td width="200">Cosmology</td>
</tr>
<tr>
<td width="30">
<input type="checkbox" name="Nuclear Physics" />
</td>
<td width="200">Nuclear Physics</td>
</tr>
</table>
<td width="30" valign="top">
<input type="checkbox" name="Chemistry" />
</td>
<td width="200" valign="top">Chemistry
<table class="cheTable" style="display:none;">
<tr>
<td width="30">
<input type="checkbox" name="Chromatography" />
</td>
<td width="200">Chromatography</td>
</tr>
<tr>
<td width="30">
<input type="checkbox" name="Catalysis" />
</td>
<td width="200">Catalysis</td>
</tr>
<tr>
<td width="30">
<input type="checkbox" name="Geochemistry" />
</td>
<td width="200">Geochemistry</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
JavaScript
$('input[name="Physics"]').on('click', function() {
$('.physicsTable').slideToggle();
})
$('input[name="Chemistry"]').on('click', function() {
$('.cheTable').slideToggle();
})