squeezethejuicebox2 squeezethejuicebox2 - 1 year ago 90
jQuery Question

Jquery Show/Hide Multiple Table Rows

Trying to show/hide table rows using jquery. First two rows work. The third row doesn't display all data.

Jfiddle: http://jsfiddle.net/vcolmenar/wG8qf/1/

HTML Data for the Table


Main
Data


<tr class="main">
<td>
<a href="#" class="main">12345</a>
</td>
</tr>

<tr class = "data">
<td>
</td>
<td>
11111
</td>
</tr>

<tr class="main">
<td>
<a href="#" class="main">12345</a>
</td>
</tr>

<tr class = "data">
<td>
</td>
<td>
11111
</td>
</tr>

<tr class="main">
<td>
<a href="#" class="main">12345</a>
</td>
</tr>

<tr class = "data">
<td>
</td>
<td>
11111
</td>
</tr>

<tr class = "data">
<td>
</td>
<td>
22222
</td>
</tr>
<tr class = "data">
<td>
</td>
<td>
33333
</td>
</tr>
<tr class = "data">
<td>
</td>
<td>
44444
</td>
</tr>




JavaScript for Jquery show/hide function

$(document).ready(function() {
//Hide table rows with class 'min', but appear when clicked.
$(".data").hide();
$(".main").click(function() {
$(this).parent().parent().next(".data").toggle("fast");
});
});

Answer Source

css

tr.data {display:none;}

javascript

$(function(){
  $("#main-data-table","body").on({'click':function(event){
    event.preventDefault();
    $(this).closest("tr.main").nextUntil("tr.main").toggle("fast");
   }},
   "a.main",null);
});

html

<table id="main-data-table">
<thead><tr>
    <th>Main</th>
    <th>Data</th>
</tr></thead>
<tfoot></tfoot>
<tbody>
<tr class="main">
        <td>
        <a href="#" class="main">12345</a>
        </td>
    </tr>

    <tr class = "data">
        <td>
        </td>
        <td>
            11111
        </td>
    </tr>

    <tr class="main">
        <td>
            <a href="#" class="main">12345</a>
        </td>
    </tr>

    <tr class = "data">
        <td>
        </td>
        <td>
            11111
        </td>
    </tr>

    <tr class="main">   
        <td>
            <a href="#" class="main">12345</a>
        </td>  
    </tr>

    <tr class = "data">
        <td>
        </td>
        <td>
            11111
        </td>
    </tr>

    <tr class = "data">
        <td>
        </td>
        <td>
            22222
        </td>
    </tr>
    <tr class = "data">
        <td>
        </td>
        <td>
            33333
        </td>
    </tr>
    <tr class = "data">
        <td>
        </td>
        <td>
            44444
        </td>
    </tr>
</tbody>
</table>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download