jquery slideToggle() and unknown height?

Posted by GaVrA on Stack Overflow See other posts from Stack Overflow or by GaVrA
Published on 2010-03-24T22:52:46Z Indexed on 2010/03/25 19:23 UTC
Read the original article Hit count: 402

Filed under:
|

Hello!

Im using jquery 1.3.2 and this is the code:

    <script type="text/javascript">
    //<![CDATA[
    jQuery(function(){
        jQuery('.news_bullet a.show_preview').click(function() {
            jQuery(this).siblings('div').slideToggle('slow');
            return false;
        }).toggle(
        function() {
            jQuery(this).css({ 'background-position' : '0 -18px' });
        },
        function() {
            jQuery(this).css({ 'background-position' : '0 0' });
        });
    });
    //]]>
</script>

If you see here i have bunch of small green + which when you click some text is revealed and background-position is changed for that link so then it shows the other part of image, red -.

So the problem i am having is that i dont know the height for those hidden elements, because it depends on how much text there is, so when i click on + and show them, animation is 'jumping'.

One workaround that i found is to put fixed height and overflow:hidden to those hidden elements. You can see how much smoother animation is running in top left block(the one with 'Vesti iz sveta crtanog filma' at the top). All other blocks dont have fixed height, and animation there is 'jumping'. Atm that fixed height in top left block is 30px, but ofc some elements require more height and some require less, so that is not a good solution... :)

So how to stop this animation from 'jumping' when there is no fixed height?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about slidetoggle