javadotnetcoder javadotnetcoder - 19 days ago 4
HTML Question

Jquery Expand and College Html table

I have issue in implementing the expand and collapse functionality for my html tables on the page

I have following html structure



<table class='css1' style='width:550px;' border='0'>
<tbody>
<tr><td class='heading'><span id="lblpreferredtype1">Preferred Type</span></td></tr>
<tr><td class='both'><br><select name="ddcontrol1" id="ddcontrol1">
<option selected="selected" value="DATABASE">DATABASE 444</option>
<option value="Value2">Value2</option>
</select><br /><br />
</td></tr>
</tbody></table>
<table class='css1' style='width:550px;' border='0'>
<tbody>
<tr><td class='heading'><span id="lblpreferredtype2">Preferred Type2</span></td></tr>
<tr><td class='both'><br><select name="ddcontrol2" id="ddcontrol2">
<option selected="selected" value="DATABASE">DATABASE 123</option>
<option value="Value2">Value2</option>
</select><br /><br />
</td></tr>
</tbody></table>
<table class='css1' style='width:550px;' border='0'>
<tbody>
<tr><td class='heading'><span id="lblpreferrednum1">Preferred Number1</span></td></tr>
<tr><td class='both'><br><select name="ddcontrol3" id="ddcontrol3">
<option selected="selected" value="DATABASE">DATABASE2</option>
<option value="Value2">Value2</option>
</select><br /><br />
</td></tr>
</tbody></table>
<table class='css1' style='width:550px;' border='0'>
<tbody>
<tr><td class='heading'><span id="lblpreferredsamp1">Preferred Sample1</span></td></tr>
<tr><td class='both'><br><select name="ddcontrol4" id="ddcontrol4">
<option selected="selected" value="DATABASE">DATABASE1</option>
<option value="Value2">Value2</option>
</select><br /><br />
</td></tr>
</tbody></table>





Now i want to achieve the following


  1. If i click on heading row() of any table, then only the heading row should remain visible, all the below rows for that table should be hidden.

  2. Also when i click on the same heading row again, it should be visible again.



I have tried the following but i am unable to make it work, some hide the below section of table but it removes all the below tables on the page.

For example if i click on top table 'Heading' row, it will hide all the below table also, while i want to hide the rows for only table which i have clicked

<script>
$( function() {
$('.heading').click(function () {

// $(this).nextUntil('tr.heading').slideToggle(1000);
$(this).nextUntil('heading').toggle();
// $(this).toggle();
// $(this).siblings().not(this).hide(); // hide the siblings of the clicked row

});
} );
</script>


Can anyone please help me in understanding my mistake.

Answer

Since .heading is a class of a <td>, you should toggle all the next siblings of its parent <tr>, like so:

$('.heading').click(function() {
  $(this).parent().nextAll().toggle();
});

$('.heading').click(function() {
  $(this).parent().nextAll().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='css1' style='width:550px;' border='0'>
  <tbody>
    <tr>
      <td class='heading'><span id="lblpreferredtype1">Preferred Type</span>
      </td>
    </tr>
    <tr>
      <td class='both'>
        <br>
        <select name="ddcontrol1" id="ddcontrol1">
          <option selected="selected" value="DATABASE">DATABASE 444</option>
          <option value="Value2">Value2</option>
        </select>
        <br />
        <br />
      </td>
    </tr>
  </tbody>
</table>
<table class='css1' style='width:550px;' border='0'>
  <tbody>
    <tr>
      <td class='heading'><span id="lblpreferredtype2">Preferred Type2</span>
      </td>
    </tr>
    <tr>
      <td class='both'>
        <br>
        <select name="ddcontrol2" id="ddcontrol2">
          <option selected="selected" value="DATABASE">DATABASE 123</option>
          <option value="Value2">Value2</option>
        </select>
        <br />
        <br />
      </td>
    </tr>
  </tbody>
</table>
<table class='css1' style='width:550px;' border='0'>
  <tbody>
    <tr>
      <td class='heading'><span id="lblpreferrednum1">Preferred Number1</span>
      </td>
    </tr>
    <tr>
      <td class='both'>
        <br>
        <select name="ddcontrol3" id="ddcontrol3">
          <option selected="selected" value="DATABASE">DATABASE2</option>
          <option value="Value2">Value2</option>
        </select>
        <br />
        <br />
      </td>
    </tr>
  </tbody>
</table>
<table class='css1' style='width:550px;' border='0'>
  <tbody>
    <tr>
      <td class='heading'><span id="lblpreferredsamp1">Preferred Sample1</span>
      </td>
    </tr>
    <tr>
      <td class='both'>
        <br>
        <select name="ddcontrol4" id="ddcontrol4">
          <option selected="selected" value="DATABASE">DATABASE1</option>
          <option value="Value2">Value2</option>
        </select>
        <br />
        <br />
      </td>
    </tr>
  </tbody>
</table>

Comments