Home/ Questions/Q 3276498
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T19:15:52+00:00

I have the following code which it was provided by Nick in a previous

  • 0

I have the following code which it was provided by Nick in a previous question and it work like a dream.

What I am trying

“I am trying to generate a jquery script to make all tr elements from a table with class top clickeable and when one tr with class top is clicked all tr below with class bt until there is another tr class top will slideToggle.”

But I did have to add an extra row in between top and bt class in some tables, and that break the jquery in those tables.

I wonder if there is any modification where I dont need to change the code in the tables and it would still work for all the table on all web pages applied.

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <script type="text/javascript">
  $("tr.top").click(function () {
  $(this).nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
});

  </script>
</head>
<body>
  <table>
    <tr class="top" style="background-color:red">
      <td>Click here to collapse the next tr with class bt but no other</td>
      <td>top row 1</td>
      <td>top row 1</td>
    </tr>
    <tr class="other">
      <td colspan="3">This is not ment to collapse when the tr at the top is clicked</td>
    </tr>

    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
    <tr class="top" style="background-color:red">
      <td>Click here to collapse the next tr with class bt</td>
      <td>top row 2</td>
      <td>top row 2</td>
    </tr>
    <tr class="bt">
      <td>bt row 2</td>
      <td>bt row 2</td>
      <td>bt row 2</td>
    </tr>
    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
    <tr class="top" style="background-color:red">
      <td>Click here to collapse the next tr with class bt</td>
      <td>top row 2</td>
      <td>top row 2</td>
    </tr>
    <tr class="bt">
      <td>bt row 2</td>
      <td>bt row 2</td>
      <td>bt row 2</td>
    </tr>
    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
  </table>
</body>
</html>​​​​​

You can see here EXAMPLE

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just skip first if it’s not a .bt:

    $("tr.top").click(function () {
  if (!$(this).next().hasClass('bt'))
    $(this).next().nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
  else
    $(this).nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
});

    (it works, already tried)

    • 0