скрываем все элементы <div class=”message_body”> после первого.
скрываем все элементы <li> после пятого
клик по <p class=”message_head”> – вызывает метод slideToggle для следующего элемента <div class=”message_body”>
клик по <a class=”collpase_all_message”> – вызывает метод slideUp для всех <div class=”message_body”>
клик по <a class=”show_all_message”> – скрывает элемент, и отображает <a class=”show_recent_only”>, так же вызывается метод slideDown для всех <li> послепятого
клик по <a class=”show_recent_only”> – скрывает элемент, и отображает <a class=”show_all_message”>, так же вызывается метод slideUp для всех <li> после пятого

$(document).ready(function(){
   
     //hide message_body after the first one
     $(".message_list .message_body:gt(0)").hide();
   
     //hide message li after the 5th
     $(".message_list li:gt(4)").hide();
   
     //toggle message_body
     $(".message_head").click(function(){
         $(this).next(".message_body").slideToggle(500)
         return false;
     });
   
     //collapse all messages
     $(".collpase_all_message").click(function(){
         $(".message_body").slideUp(500)
         return false;
     });
   
     //show all messages
     $(".show_all_message").click(function(){
         $(this).hide()
         $(".show_recent_only").show()
         $(".message_list li:gt(4)").slideDown()
         return false;
     });
   
     //show recent messages only
     $(".show_recent_only").click(function(){
         $(this).hide()
         $(".show_all_message").show()
         $(".message_list li:gt(4)").slideUp()
         return false;
     });
   
});