How to expand/collapse entire HTML table after clicking a certain object

Question

I have an html script like below:

...
<h2>Invoice Registers</h2>
<table id="mytable" border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
</table>
...

What I want is to expand or collapse the entire HTML table when I click on "Invoice Registers" text. If I had the <h2> inside the table, I'd use the solution here and manage this, but couldn't find a solution for the current situation. How can I handle this? Note that the <h2> tag must stay out of the table. Any help or advice would be appreciated.

score 2 · Answer 1 · answered Feb 28 '20 at 20:48

you need to use javascript to do the actual work. You also need something in a "a" tag or button to trigger the javascript. Should be something like this. I haven't tested this btw.

<h2>Invoice Registers</h2>
<table id="mytable" border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
</table>

<button onclick="myFunction()">Hide/Unhide</button>

<script>
function myFunction() {
  var x = document.getElementById("mytable");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

blex · Accepted Answer · 2020-02-28T20:54:51.380

Find the next table after this h2, and toggle it?

$('h2').click(function () {
  $(this).nextAll('table').eq(0).toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Invoice Registers</h2>
<table border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
</table>

<h2>Something else</h2>
<table border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
</table>

Bonus

If you want an animation, wrap your tables in a div (table elements cannot be animated):

$('h2').click(function() {
  $(this).nextAll('.table-wrapper').eq(0).slideToggle(400);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Invoice Registers</h2>
<div class="table-wrapper">
  <table border="1">
    <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>
    </tr>
  </table>
</div>

<h2>Something else</h2>
<div class="table-wrapper">
  <table border="1">
    <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>
    </tr>
  </table>
</div>

Couldn't this just be `$(this).next('table').toggle();` instead of nextAll? — Lithium, Feb 28 '20 at 20:50
It would work in the specific HTML example he provided, because `next` returns either the next element or `undefined` if it does not match the selector. However, to be more future-proof in case he adds stuff between the `h2` and the `table`, I used `nextAll` which will still work in that case — blex, Feb 28 '20 at 20:52

score 1 · Answer 3 · answered Feb 28 '20 at 20:46

1

Add a click handler to the <h2> which toggles the display of the table. Here's a working example: https://jsfiddle.net/ob8p52n6/

answered Feb 28 '20 at 20:46

kmoser

8,780
3
24
40

score 1 · Answer 4 · answered Feb 28 '20 at 20:47

If you're looking for an animated expand/collapse type thing, you'll need something more complex, but if you just want to show/hide it, try this:

function showTable(tableName) {
  const tbl = document.getElementById(tableName);
  tbl.style.display = tbl.style.display === 'none' ? 
    'block' : 'none';
}

#mytable {
  display: none;
}

<h2 onclick="showTable('mytable')">Invoice Registers</h2>
<table id="mytable" border="1"> 
   <tr>
      <th>Control Number</th><th>Payee Name</th>
      <th>Workflow Step</th><th>Date Created</th>  
   </tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
   <tr>...my data...</tr>
</table>

How to expand/collapse entire HTML table after clicking a certain object

4 Answers4