Question

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 :

$(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');  
    });  
});  

and my jsfiddle is here

Answer 1

Try this,

 $(document).ready(function(){
   //Toggling between more results

   $('.loadMoreDiv').click(function(){
     $('#loadMoreDiv').hide();
     $('#hideMoreDiv').show();       
     $('.old_message_block').slideDown(500).removeClass('inactive').addClass('active');
     $('#messagesLabel').text('showing all messages');
   });

   $('.lessMoreDiv').click(function(){
     $('#hideMoreDiv').hide(); 
     $('#loadMoreDiv').show(); 
     $('.old_message_block').slideUp(500).removeClass('active').addClass('inactive');    
     $('#messagesLabel').text('Most Recent message');
   });    

 });