ansaurus

Question

How to make it smoother with toggle ('slow')

Answer 1

A:

Hi, you can use .children('p') in order to access <p> from <div>, but I suggest You to try the .slideToggle('slow') method instead of .toggle, still applying it to the <div> element. Generally, it fits well for the sort of thing You expect.

stanch 2009-06-13 13:13:41

I added .children('p') to the above code.var $parentpara = $(this).parent().prev().children('p');But this does not work.Any idea?

shin 2009-06-13 14:11:55

Well, i just pointed you out a way to access the paragraph. I'm not sure whether it's a way to smoothen the animation. Also, you'll have to .toggle the div anyway. Personnaly i one more time suggest you trying .slideToggle for this thing. Check the web - hidden paragraphs do often slide, not just toggle.

stanch 2009-06-13 14:19:21

Answer 2

A:

I'm not sure what's causing the jitter. My guess is it's an effect caused by fitting the paragraph into the div when the div's display attribute is changed from 'none' to 'block'. I've applied stanch's suggestion and come up with a working example that seems to work a little better.

<html>
<head>
<style type="text/css">
body {width: 660px; margin: 0 auto; }
.toppara{
background-color: #FF9; 
}
.morepara {
background-color: #fff; 
}

.togglebutn {
color: #900;
background-color: #FFF; 
}

</style>

</head>

<body>
    <div id="section1">
        <div class="toppara">
            <p>Content 1.</p> 
        </div>
        <div class="morepara">
            <p>
            Content 2. 
            </p>
        </div>
        <p class="togglebutn">
            <a>Show/Hide</a>
        </p>
    </div>

    <div id="section2">
        <div class="toppara">
            <p>Content 3.</p> 
        </div>
        <div class="morepara">
            <p>
            Content 4.
            </p>
        </div>
        <p class="togglebutn">
            <a>Show/Hide</a>
        </p>
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script language="javascript" type="text/javascript">
$('document').ready( function (){
    $('.morepara p').hide();
    $('.togglebutn a').click(
        function(){
            var parentpara = $(this).parent().prev().children();
            parentpara.toggle('normal');
        }
    );
});
</script>
</body>
</html>

converter42 2009-06-13 15:40:35

Answer 3

+2 A:

For sliding down to work JQuery has to guess the eventual height of the element. When it gets this wrong you see a jump when the animation ends and the element is allowed to find its natural height.

Your problem is caused by the margins on the p tag which take up space in JQuery's original estimate, but are collapsed when the animation completes.

The solution is to either remove the margins on the p tags, to try to prevent the collapsing from happening by giving the .morepara div an explicit height, a border or some top/bottom padding, though both options have undesirable side effects.

grahamparks 2009-06-13 20:48:41

+1 Thanks for filling in that important bit of information.

converter42 2009-06-14 01:33:10

Answer 4

A:

Not sure if you have an answer to this yet but giving the DIV's that are being toggled a specific WIDTH actually worked for me. checked in FF & IE 7-8

hollywood3224 2009-11-12 04:06:11

ansaurus

tags:

views:

answers:

How to make it smoother with toggle ('slow')

related questions