JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table-member-benefits">
  <tbody>
    <tr>
      <td>
      	<table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td>
              	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                        <td width="60%" align="right" class="total-investment header-spacer">Total Investment:</td>
                        <td width="10%" align="center" valign="middle" class="gold header-spacer">GOLD</td>
                        <td width="10%" align="center" valign="middle" class="silver header-spacer">SILVER</td>
                        <td width="10%" align="center" valign="middle" class="bronze header-spacer">BRONZE</td>
                        <td width="10%" align="center" valign="middle" class="standard header-spacer">STANDARD</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td>
              	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                      <td>
                      	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tbody>
                          	<tr class="row-spacing"><td></td></tr>
                            <tr class="parent">
                              <td><h2><a href="#" class="toggle">+ THIS IS HEADER #1</a></h2></td>
                            </tr>
                            <tr class="child">
                              <td>
                                <table width="100%" border="0" cellspacing="0" cellpadding="10">
                                  <tbody>
                                    <tr class="border-bottom-red">
                                      <td width="60%">
                                  ...

JavaScript

$(document).ready(function () {
    $('tr.parent').next('tr.child').hide();
    $('a.toggle').on('click', function (e) {
        e.preventDefault();
        
        var $this = $(this),
            $child = $this.closest('tr.parent').next('tr.child');
        $this.closest('tr.parent').siblings('tr.child').not($child).hide();
        $child.toggle();
        
        var top = $(this).offset().top -60;        
        $('html,body').animate({scrollTop: top})
    })
});