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: 507
        
jQuery
|slidetoggle
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