Hi, I need a expanding and collapsing function for a table. The code found on line most are for and then in js define a function for this tr class.

But my case is more plicated as seen as picture. It will expand after clicking "Parameter 1" and show a merged cell and 2 cells.

So in this case, how can I realize this function? Thanks in advance.

Attached is a simple snippet for the table for your test:

/

html for test table

<table width="200" border="1">
  <tr>
    <td rowspan="5">Summary 1</td>
    <td colspan="2"><div align="center">1 st level</div></td>
  </tr>
  <tr>
    <td colspan="2"><div class="P1">Parameter 1</div></td>
  </tr>
  <tr>
    <td rowspan="2">Sub level-1 </td>
    <td>Sub parameter (1)</td>
  </tr>
  <tr>
    <td>Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="2"><div class="P2">Parameter 2</div></td>
  </tr>
</table>

JS

$('.P1').click(function(){
  $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
  $(this).nextUntil('.P2').slideToggle(100, function(){
  });
});

Hi, I need a expanding and collapsing function for a table. The code found on line most are for and then in js define a function for this tr class.

But my case is more plicated as seen as picture. It will expand after clicking "Parameter 1" and show a merged cell and 2 cells.

So in this case, how can I realize this function? Thanks in advance.

Attached is a simple snippet for the table for your test:

https://jsfiddle/knspgwkq/

html for test table

<table width="200" border="1">
  <tr>
    <td rowspan="5">Summary 1</td>
    <td colspan="2"><div align="center">1 st level</div></td>
  </tr>
  <tr>
    <td colspan="2"><div class="P1">Parameter 1</div></td>
  </tr>
  <tr>
    <td rowspan="2">Sub level-1 </td>
    <td>Sub parameter (1)</td>
  </tr>
  <tr>
    <td>Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="2"><div class="P2">Parameter 2</div></td>
  </tr>
</table>

JS

$('.P1').click(function(){
  $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
  $(this).nextUntil('.P2').slideToggle(100, function(){
  });
});

• javascript
• html
• jquery
• css

Share Improve this question Follow edited Nov 19, 2022 at 18:55 Daniel Widdis 9,1601313 gold badges4848 silver badges6868 bronze badges asked Dec 16, 2015 at 8:43 HélénaHéléna 1,09533 gold badges1414 silver badges4040 bronze badges 8

• Hi@jcubic, may I know where you have edited? – Héléna Commented Dec 16, 2015 at 8:54
• he added tag "jquery" – phts Commented Dec 16, 2015 at 8:55
• When you have enough reputation you can edit just tags. – jcubic Commented Dec 16, 2015 at 8:55
• This will work when you add P1 P2 classes to tr elements – jcubic Commented Dec 16, 2015 at 8:58
• @jcubic, there is a problem because "Parameter" is a <td>, instead of <tr>:<td colspan="2"><div class="P1">Parameter 1</div></td>. – Héléna Commented Dec 16, 2015 at 9:01

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

How about adding your custom data attribute to the cells that you wish to control? Live example https://jsfiddle/knspgwkq/7/

Your parent will hold data-collapsable-parent with some key value. And your children that you wish to hide/show with above parent will hold data-collapsable-child with the same key value as parent.

And if you need additional collapsing expanding elements check this example By clicking Parameter 1 then Sub parameter (2) you will open additional element.

https://jsfiddle/knspgwkq/9/

$('[data-collapsable-parent]').click(function(){
  var child = $(this).attr("data-collapsable-parent");
  $('[data-collapsable-child="'+ child + '"]').toggle('slow');
});

 [data-collapsable-child] {
   display: none;
 }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="200" border="1">
  <tr>
    <td rowspan="5">Summary 1</td>
    <td colspan="2"><div align="center">1 st level</div></td>
  </tr>
  <tr>
    <td colspan="2" data-collapsable-parent="1"><div class="P1">Parameter 1</div></td>
  </tr>
  <tr>
    <td data-collapsable-child="1" rowspan="2">Sub level-1 </td>
    <td data-collapsable-child="1" >Sub parameter (1)</td>
  </tr>
  <tr>
    <td data-collapsable-child="1" >Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="2"><div class="P2">Parameter 2</div></td>
  </tr>
</table>

Here's an idea: use two toggles to get the upward collapse effect, and the downward expand effect (without modifying your table structure).

// Basic toggle without animation
//$('.P1').on("click", function() {
//  $(this).closest("tr").nextUntil('.P2').toggle();
//});

// Better sliding toggle
$('.P1').on("click", function() {
  $trs = $(this).closest("tr").nextUntil('.P2');
  $trs.eq(1).find("td").eq(0).slideToggle(100, function() {
    $trs.eq(0).slideToggle(100);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="200" border="1">
  <tr>
    <td rowspan="5">Summary 1</td>
    <td colspan="2">
      <div align="center">1 st level</div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="P1">Parameter 1</div>
    </td>
  </tr>
  <tr>
    <td rowspan="2">Sub level-1</td>
    <td>Sub parameter (1)</td>
  </tr>
  <tr>
    <td>Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="P2">Parameter 2</div>
    </td>
  </tr>
</table>