Show And Hide Two Table Rows On Click

[webguync]

I am using some JQuery to show and hide tables rows on click. It actually works well, but what I would really need to do is show multiple table rows on a click event. Currently I am only showing the subsequent first child row from the row being clicked. Not sure how I would show more than the one row, so that is what I need help with. Here is my current code.

 

The HTML

<table id="MyTable">

<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>

</tr>
<tr>
<td colspan="3">
<h4>Additional information</h4>
<ul>
<li><a href="">link 1</a></li>
<li><a href="">link 2</a></li>
<li><a href="">link 3</a></li>
</ul>
</td>
</tr>
<tr><td>Currently, I can't be hidden and displayed, but I would like to be!</td></tr>
</table>

Javascript

<script type="text/javascript">
$(document).ready(function(){
$("#MyTable tr:odd").addClass("odd");
$("#MyTable tr:not(.odd)").hide();
$("#MyTable tr:first-child").show();

$("#MyTable tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
//$("#MyTable").jExpand();
});
</script>

 

JQuery

(function($){
$.fn.jExpand = function(){
var element = this;

$(element).find("tr:odd").addClass("odd");
$(element).find("tr:not(.odd)").hide();
$(element).find("tr:first-child").show();

$(element).find("tr.odd").click(function() {
$(this).next("tr").toggle();
});

}
})(jQuery);

[JustLikeIcarus]

If you give the clickable rows a class for example

<tr class="clickable"><tr>

then you could do something like

$("#MyTable tr.clickable").click(function(){
$(this).nextUntil(".clickable").toggle();
}

 

This would select all the sibling rows until it hit the next with the class of clickable.

Edited October 24, 2012 by JustLikeIcarus

[webguync]

that didn't seem to work for me. I changed this part.

 

 

$("#MyTable tr.odd").click(function(){

$(this).next("tr").toggle();

 

 

with what you provided and added the class of clickable to the <tr>, did I need to do anything with the CSS?

[webguync]

I sort of have this working, but it's kind of in reverse of what I want it to do. The child rows are displaying until you click the parent row, and then they are hidden. I would like the reverse to occur. I want the child rows to be hidden until clicked and then they display. Here is my code.

<script type="text/javascript">
$(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","click to display more organizational information")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide().children('td');
});
</script>

<tr class="parent" id="Org" title="click for more organizational information">

       <td colspan="7" class="OrgName"><?php echo $record['company_t'];?></td><td><div class="arrow"></div></td>
</tr>

<tr class="child-Org">
<td><?php echo $record['address1_t'];?></td>
<td><?php echo $record['address2_t'];?></td>
<td><?php echo $record['city_t'];?></td>
<td><?php echo $record['state_t'];?></td>
<td><?php echo $record['zip_t'];?></td>
<td><?php echo $record['phone_t'];?></td>
<td><a href="mailto:<?php echo $record['email_t'];?>"><?php echo $record['email_t'];?></a></td>
<td><a href="http://<?php echo $record['url_t'];?>"><?php echo $record['url_t'];?></a></td>
</tr>
<tr class="child-Org">
<td colspan="7">
<?php echo $record['profile_t'];?></td>

</tr>