Dual collapsible sections that occupy the same space

Question

I want to create collapsible sections that allow you to change what content shows within the "collapible box" based on which button you select. So for example, say you have two buttons at opposite sides of the page. One is a navigation tool, the other a settings button. Selecting the Navigation tool button will open the section with the buttons to take you to various pages. I have this functionality coded in already. However, we have various different settings pages because of the way the system works, and the limitations of the coding platform we use. Speaking of limitations, we are restricted to HTML and CSS (they didn't want to functionality of Java in the platform for security risks, but just makes my job harder).

Here is a visual aid of what I want, and will give you an idea of how the page is structured.

I am fairly limited in what I could try, but so far I have used a Summary tag within a details tag to create the collapsible. The entire panel is created utilising a table as seen here;

<table>
  <th>
    <details>
      <summary>
        <span><i class></i></span><br>
      </summary>
      <center>
        <table>
          <th>
          <div>button</div
          <th>
          <th>
          <div>button</div
          <th>
          <th>
          <div>button</div
          <th>
          <th>
          <div>button</div
          <th>
        </table>
      </center>
    </details>
  </th>
</table>

I have tried to add another cell to the first table, and then do a dropdown from that, however, it keeps the width of second, which in of itself isn't terrible, however it also forces the navigation buttons to the left more, and it makes it so its no longer centre, which is how we want the contents of the collapsible to be.