CODEWITHSUNDEEP
jquerytoggle
shin
shin

Reputation: 32721

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

I have the following code which works but it becomes a bit jumpy at the end of each toggle action.

Will it be smoother if I toggle the paragraph? I am trying to get the paragraph, but I don't know how to do it.

<head>

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

.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><!-- section 1 -->

<!-- section 2 -->
<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><!-- section 2 -->

<script language="javascript" type="text/javascript">
$(function() {
    $('.togglebutn a').click(               
        function(){ 
        var $parentpara = $(this).parent().prev();
        
        $parentpara.toggle('slow');
    });

});


</script>

Upvotes: 3

Views: 10054

Answers (4)

hollywood3224
hollywood3224

Reputation: 21

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

Upvotes: 0

grahamparks
grahamparks

Reputation: 16296

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.

Upvotes: 5

converter42
converter42

Reputation: 7516

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"></script>
<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>

Upvotes: 0

stanch
stanch

Reputation: 325

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.

Upvotes: 0

Related Questions