how can i add animate function here
<p>i am trying to show some div contents when user click a show more button and then hide the div contents when user click a hide button, i want to make this function with some animation. here is my script : </p>

<pre><code>$(document).ready(function(){  //Toggling between more results
    $('.loadMoreDiv').click(function(){  
        $('#loadMoreDiv').hide();  
        $('#hideMoreDiv').show();  
        $('.old_message_block').removeClass('inactive').addClass('active');  
        $('#messagesLabel').text('showing all messages');  
    });  
    $('.lessMoreDiv').click(function(){  
        $('#hideMoreDiv').hide();  
        $('#loadMoreDiv').show();  
        $('.old_message_block').removeClass('active').addClass('inactive');  
        $('#messagesLabel').text('Most Recent message');  
    });  
});  
</code></pre>

<p>and my jsfiddle is <a href="http://jsfiddle.net/sureshpattu/JkuW3/1/" rel="nofollow">here</a></p>
