How to make html table columns () collapsible/expandable?

Question

I looked everywhere for an answer to this and couldn't find anything. I have an HTML table with 13 columns. My 7th column Number of Tops is a grand total of columns 8-11: # Short-sleeve, # Long-sleeve, # Sweaters, # Jackets. Each row in the table represents a person's clothes that they own. My goal is to have columns 8-11 collapsed by default and only display columns 1-7 and columns 12 and 13. When I click on the 7th column's header <th>Number of Tops</th>, I want columns 8-11 to expand to show more information about the how that number is broken down. Additionally, when the columns are expanded, clicking the 7th column's header <th>Number of Tops</th> should make the expanded columns 8-11 collapse again. Ideally I'd like to make a nice CSS transition when the columns expand/collapse, but that's just the cherry on top.

Heres the HTML of the table I'm talking about:

<div class="table">
  <table>
    <thead>
      <tr>
        <th>Name</th>             <!-- Always visible -->
        <th>Address</th>          <!-- Always visible -->
        <th>Phone Number</th>     <!-- Always visible -->
        <th>Number of Pants</th>  <!-- Always visible -->
        <th>Number of Shoes</th>  <!-- Always visible -->
        <th>Number of Socks</th>  <!-- Always visible -->
        <!-- Column 7: totals column -->
        <th>Number of Tops</th>   <!-- Always visible; clickable -->
        <th># Short-sleeve</th>   <!-- collapsible/expandable -->
        <th># Long-sleeve</th>    <!-- collapsible/expandable -->
        <th># Sweaters</th>       <!-- collapsible/expandable -->
        <th># Jackets</th>        <!-- collapsible/expandable -->
        <th>Number of Hats</th>   <!-- Always visible -->
        <th>Number of Bags</th>   <!-- Always visible -->
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

When the columns are collapsed, I want the corresponding cell values for columns 8-11 to also collapse as if CSS display: none. So it looks like a normal table with 9 columns until the 7th column header is clicked, which will transition columns 8-11 to open/expand from the right side into a 13-column table. Then when clicked again, columns 8-11 should transition a collapse left "into" the right side of the 7th column. The columns should be in the same order as it was given.

I'd like to do this with pure HTML, Javascript, jQuery, and CSS if possible. The table is a DataTable.

Thanks for the help!

Answer 1

Here's a trivial example using font-size as the animatable property. It needs a line of JavaScript to set a class on the table itself so that the other cells in columns 8-11 can also pick up on expanding or contracting.

table tr> :nth-child(8),
table tr> :nth-child(9),
table tr> :nth-child(10),
table tr> :nth-child(11) {
  font-size: 0px;
  transition: font-size 1s linear;
}

table.expand tr> :nth-child(8),
table.expand tr> :nth-child(9),
table.expand tr> :nth-child(10),
table.expand tr> :nth-child(11) {
  font-size: 16px;
}

<div class="table">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <!-- Always visible -->
        <th>Address</th>
        <!-- Always visible -->
        <th>Phone Number</th>
        <!-- Always visible -->
        <th>Number of Pants</th>
        <!-- Always visible -->
        <th>Number of Shoes</th>
        <!-- Always visible -->
        <th>Number of Socks</th>
        <!-- Always visible -->
        <!-- Column 7: totals column -->
        <th onclick="document.querySelector('table').classList.toggle('expand');">Number of Tops</th>
        <!-- Always visible; clickable -->
        <th># Short-sleeve</th>
        <!-- collapsible/expandable -->
        <th># Long-sleeve</th>
        <!-- collapsible/expandable -->
        <th># Sweaters</th>
        <!-- collapsible/expandable -->
        <th># Jackets</th>
        <!-- collapsible/expandable -->
        <th>Number of Hats</th>
        <!-- Always visible -->
        <th>Number of Bags</th>
        <!-- Always visible -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Fred</td>
        <!-- Always visible -->
        <td>Seattle</td>
        <!-- Always visible -->
        <td>07777777777</td>
        <!-- Always visible -->
        <td>4</td>
        <!-- Always visible -->
        <td>3</td>
        <!-- Always visible -->
        <td>24</td>
        <!-- Always visible -->
        <!-- Column 7: totals column -->
        <td>18</td>
        <!-- Always visible; -->
        <td>5</td>
        <!-- collapsible/expandable -->
        <td>6</td>
        <!-- collapsible/expandable -->
        <td>4</td>
        <!-- collapsible/expandable -->
        <td>3</th>
          <!-- collapsible/expandable -->
          <th>2</th>
          <!-- Always visible -->
          <th>4</th>
          <!-- Always visible -->
      </tr>
      <tbody>
  </table>
</div>

However, you may want to be a little more sophisticated and use JS to find the actual widths of each of those columns and expand and contract them accordingly.