Slide animation not sliding all content in to view
HI,
I have a simple bit of functionaility to toggle some paragraphs on and off when a user clicks a heading tag:
HTML:
<div id="values">
<div><h5>Working Together:</h5><p>LOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsum .</p></div>
<div><h5>Respect:</h5><p> LOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsum.</p></div>
<div><h5>Integrity:</h5><p>LOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsum </p></div>
<div><h5>High Performance:</h5><p>LOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsum </p></div>
<div><h5>Growth:</h5> <p>LOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsum</p></div>
<div><h5>Fun:</h5><p>LOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsumLOREM ipsum</p> </div>
</div>
and a little jquery:
function slideContent() {
$('div#values p').hide();
var header = $('div#values h5').css('cursor', 'pointer');
$('div#values h5').click(function() {
var para = $(this).siblings();
if((para.is('p')) && (para.is(':visible'))) {
para.slideUp('fast');
} else if ((para.is('p')) && (para.is(':hidden'))) {
para.slideDown('fast');
}
});
}
it works ok but i'm noticing that the slide happens and then if theres 3 lines of text instead of two the bottom line 'pops' out at the end instead of the slide animaiton revealing it? Ever come accross this?