JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
    <tr>
        <th class="confluenceTh"></th>
        <th class="confluenceTh">a1</th>
        <th class="confluenceTh">a2</th>
        <th class="confluenceTh">a3</th>
    </tr>
</thead>
<tbody>
<tr>  
  <td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
  <td class="confluenceTd">b1</td>
  <td class="confluenceTd">b2</td>
  <td class="confluenceTd">b3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content0" class="expanding-content">val1</p>
</td>
</tr>
<tr>  
  <td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
  <td class="confluenceTd">c1</td>
  <td class="confluenceTd">c2</td>
  <td class="confluenceTd">c3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>

</tbody>
</table>

CSS

td { white-space: pre }       p { display: none }

JavaScript

$(document).on("click","a[data-toggle]", function(e) {
  e.preventDefault();  // prevent navigating
  var selector = $(this).data("toggle");  // get corresponding element
  $("p").hide();
  $(selector).show();
});