asked on

How can incorporate this animated show / hide dynamic into this scenario?

This works:

<!doctype html>
<html lang="en">
<head>  
<meta charset="utf-8">  
<title>jQuery UI Effects - Hide Demo</title>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>

 
 <style>
.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}
 
.show_hide {
    display:none;
}


</style>
 
 </head>
 
 <body>
 <script type="text/javascript">
 $(document).ready(function(){
 
        $(".slidingDiv").hide();
        $(".show_hide").show();
 
    $('.show_hide').click(function(){
    $(this).next().slideToggle();
    });
	
});
 </script>
 
 <a href="#" class="show_hide">Show/hide</a>
	<div class="slidingDiv">
	Fill this space with really interesting content. 
	</div>
	<br><a href="#" class="show_hide">Show/hide</a>
	<div class="slidingDiv">
	Fill this space with really interesting content. 
	</div>
</body>
</html>

Open in new window

This does not:

<a href="#" class="show_hide">Show/hide</a>
<table>
	<tbody class="slidingDiv">
		<tr>
			<td>hello</td>
			<td>indeed</td>
		</tr>
	</tbody>
	<tr>
		<td>and...</td>
		<td>not really</td>
	</tr>
</table>

Open in new window

What I'm trying to do is achieve the same kind of animated motion with the rows of my table that I have with the slidingDiv div in the first example.

In other words, I want a collection of rows hidden until I click a link, at which point I get that smooth transition of them being revealed.

How?

Looking forward to hearing from minds greater than my own!

Brian Tao

The "next()" of your last "show_hide" is the table and not the tbody tag, so it shows/hides the entire table, and doesn't work on the tbody.

Bruce Gust

ASKER

Brian! Sorry to be such a teacup, but could you show me what it's supposed to look like?

ASKER CERTIFIED SOLUTION

Brian Tao

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial