Trying to write a jQuery function that shows content and hides the rest
<p>Im trying to write a complicated (for me) function on my website. I had 3 rows, each containing an image. On hover I want this image background position to change, thats it. When the user then clicks this image, I want the parent div to expand in height, and the image to expand in height as well as change the background position of that. </p>

<p>After this function is complete and you click another image, Id like the previous one to scale back down to size, This is hard to explain so ive made a jsfiddle demo that I hope gives you all an idea. </p>

<p>Also as im new to jqwuery im a bit concerned my function looks bloated, is this bad practice or does it appear okay? </p>

<pre><code>// On work showcase click, expand area to show information
$('.work-showcase').click(function(){
    if ( !$(this).hasClass('active') ){
        $(this).addClass('active');
        $('.work-showcase').animate({height:'135px'}, 500);
        $(this).find('ul li').animate({height:'350px'}, 500);
        $(this).find('ul li').css({
            'background-position':'bottom left',
            'background-size' : 'auto auto'
        });         
        $(this).find('ul li img').animate({height:'350px'}, 500);
        $(this).animate({height:'400px'}, 500,function() {  
            $("html, body").animate({ scrollTop: $(this).offset().top });  
        });
    } else { return false;};
});
</code></pre>

<p><strong>Demo</strong></p>

<p><a href="http://jsfiddle.net/mx4HJ/2/" rel="nofollow">http://jsfiddle.net/mx4HJ/2/</a></p>
