Home/ Questions/Q 8201263
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T06:44:55+00:00

it should be simple but this jQuery function are taking a element to much,

  • 0

it should be simple but this jQuery function are taking a element to much, it even hide the jQuery I think.

What I will like to do, is when a person click a tr th, all next tr td should be hide until next tr th.

How can I get this code to work??

    <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
th {  background:#dad;
      font-weight:bold;
      font-size:16px; 
      width: 50%;
}
td {  background:red;
      font-weight:bold;
      font-size:16px; 
      width: 50%;
}
</style>
</head>
<body>
  <table id="example">
    <tr>
      <th>
        <button>Show it 3</button>
      </th>
    </tr>
    <tr>
      <td>test 1</td>
    </tr>
    <tr>
      <td>test 2</td>
    </tr>
    <tr>
      <th>
        <button>Show it 2</button>
      </th>
    </tr>
    <tr>
      <td>test 3</td>
    </tr>
    <tr>
      <td>test 4</td>
    </tr>
  </table>

    <script>
      $('#example tr th').click( function() {
        //alert($(this).parent().html())
        $(this).parent().nextUntil('tr th').toggle();
      })
    </script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you can add a class to he tr elements that has th element:

    <table id="example">
    <tr>
      <th class='toggle'>
        <button>Show it 3</button>
      </th>
    </tr>
    <tr>
      <td>test 1</td>
    </tr>
    <tr>
      <td>test 2</td>
    </tr>
    <tr class='toggle'>
      <th>
        <button>Show it 2</button>
      </th>
    </tr>
    <tr>
      <td>test 3</td>
    </tr>
    <tr>
      <td>test 4</td>
    </tr>
  </table>


    $('#example tr th').click( function() {
   $(this).parent().nextUntil('.toggle').toggle();
})

    DEMO

    • 0