How can I make this slideToggle dynamic smoother?

Head out to http://brucegust.com/portfolio/verizon/toggle_test.php. Click on the "System Performance" link and you'll see some content revealed, which is exactly what I want, with the exception of the fact that the content isn't revealed smoothly. Instead, it's a very abrupt appearance and when you click on it to hide it, it hesitates.

Compare that to http://www.brucegust.com/portfolio/verizon/index.php#. Hover over the "regions" link and you'll see another "System Performance" link. When you click on it, the content is very smooth and THAT's what I want.

How do I get my first example to toggle smoothly?
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ronak PatelCommented:
Hi brucegust,

Please try below code:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>South Area Network</title>
<style>
body { 
  font-family: Helvetica, Microsoft Sans Serif;
  font-size: 11pt;
  background: #FFF;
  color: #000;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
	 
//this is your starting point where all your slidingNavTerms are hidden and your display_hide links are displayed

		$(".slidingManagerTerms").hide();
		$(".display_show").show();
 
//here's your actual function, as far as a user clicking on a link in order to see the "hidden" link beneath it 
 
	//$('.display_show').click(function() {
    //$(this)
    //    .closest('tbody')
    //    .next('.slidingManagerTerms')
    //    .slideToggle('slow');
	//});
	
	$('.display_show').click(function(){
		$(this).next().slideToggle();
	});


//this is the command that corresponds to all of the links on your main nav bar in that anytime the user hovers over a "primary" link, it sets all of the previously exposed links to "hidden." This way
//any expanded menus don't linger. Since I've got graphic to correspond with every link, I gave each link a function. It may not be the most elegant approach, but it got the job done.	
	
});
 </script>

</head>

<body>

<table>
	<tr>
		<td>this will be my button</td>
	</tr>
	<tr>
		<td style="height:15px;">
			<a href="#" class="display_show" style="color:#000000; text-decoration:none; outline:0;">System Performance &#9660;</a>
			<div class="slidingManagerTerms" style="border:0; background-color:#cccccc; padding:3px; border-radius:3px; -moz-border-radius:3px; width:auto;"><a href="http://sasysperf.nss.vzwnet.com/dashb/dashboards.php?market=Carolinas/Tennessee" target="_blank" style="color:#000000; text-decoration:none; outline:0;">KPI Performance</a></div>
		</td>
	</tr>
	<!-- <tbody class="slidingNavTerms">
	<tr>
		<td style="border:0; background-color:#cccccc; padding:3px; border-radius:3px; -moz-border-radius:3px; width:auto;">
		<a href="http://sasysperf.nss.vzwnet.com/dashb/dashboards.php?market=Carolinas/Tennessee" target="_blank" style="color:#000000; text-decoration:none; outline:0;">KPI Performance</a></div>
		</td>
	</tr>
	</tbody> -->
	<tr>
		<td>some more content</td>
	</tr>
</table>

</body>
</html>

Open in new window


Also attached demo html file.


Hope this helps.

Regards,
Ronak

test6.html

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bruce GustPHP DeveloperAuthor Commented:
Hey, Ronak!

This works great, but the challenge is to have the hidden content within a group of rows, as opposed to div within the same cell.

Can you show me an example of the same kind of "smoothness" that you have in this example where the hidden content is within a group of rows as opposed to it being within the same cell as the link / button?
Bruce GustPHP DeveloperAuthor Commented:
Never mind, Ronak!

I was able to fit my rows within the div by using a separate table.

Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.