Simple toggle() issue

[coupe-r]

Hi All,

 

I just want a div to toggle when clicked.  However, when I click it for the first time, it slides down too far, then jumps back up really quick to where it should be.  When I click it again, it slides up perfectly?

 

Jquery:

<script type="text/javascript">
$(document).ready(function() {

$('#personal').click(function() {
	$('#personalContent').toggle(1000)
});

});

 

HTML:

<div id="personal" class="dashHeading">
<p><img src="../img/dashboard/arrow.png" width="20" height="20" /> Personal Information</p>
</div>


<div id="personalContent" style="display:none;">

     <p>This text slides</p>

</div>

[AyKay47]

the only thing that I notice is that you aren't ending you code line

 

<script type="text/javascript">
$(document).ready(function() {

$('#personal').click(function() {
	$('#personalContent').toggle(1000); // place a ; on the end here
});

});

other thatn that, I really don't see anything that would be causing this

[coupe-r]

Thanks for responding, however that wasn't it....  toggle() by itself works fine, but toggle(1000), fadeIn(1000), etc always makes the area bigger and then snaps back about a 1/8 of an inch.  Weird....

[AyKay47]

when a duration is provided in the toggle() funciton, it becomes an animation method which affects height and width...here's some interesting reading on the subject..

 

http://api.jquery.com/toggle/

[coupe-r]

OK cool,  can you help with a fade question?

 

Below is my fadeIn() code.  On clicking a div, it fades in.  What I want to do is have it fade out on a second click.  Thanks

 

$(document).ready(function() {

$('#employment').click(function() {
	$('#employmentContent').fadeIn('slow', function() {;

	});
});

});

[AyKay47]

you want the fadeToggle() function then

[coupe-r]

Thats perfect!!  No need to worry about the height issue anymore...

 

Thanks!!