Js implementation of the collapsible message board of of with the source download

The javaScript code is as follows:

$(document).ready(function(){ 

$(".message_list .message_body:gt(0)").hide(); 

$(".message_list li:gt(4)").hide(); 
$(".message_head").click(function(){ 
$(this).next(".message_body").slideToggle(500) 
return false; 
}); 

//Put all messages away
$(".collpase_all_message").click(function(){ 
$(".message_body").slideUp(500) 
return false; 
}); 

//Display all messages
$(".show_all_message").click(function(){ 
$(this).hide() 
$(".show_recent_only").show() 
$(".message_list li:gt(4)").slideDown() 
return false; 
}); 

//Only the most recent messages are displayed
$(".show_recent_only").click(function(){ 
$(this).hide() 
$(".show_all_message").show() 
$(".message_list li:gt(4)").slideUp() 
return false; 
}); 

});

The CSS part is as follows:

* { 
margin: 0; 
padding: 0; 
} 
body { 
margin: 10px auto; 
width: 570px; 
font: 75%/120% Arial, Helvetica, sans-serif; 
} 
p { 
padding: 0 0 1em; 
} 
.message_list { 
list-style: none; 
margin: 0; 
padding: 0; 
width: 383px; 
} 
.message_list li { 
padding: 0; 
margin: 0; 
background: url(images/message-bar.gif) no-repeat; 
} 
.message_head { 
padding: 5px 10px; 
cursor: pointer; 
position: relative; 
} 
.message_head .timestamp { 
color: #666666; 
font-size: 95%; 
position: absolute; 
right: 10px; 
top: 5px; 
} 
.message_head cite { 
font-size: 100%; 
font-weight: bold; 
font-style: normal; 
} 
.message_body { 
padding: 5px 10px 15px; 
} 
.collapse_buttons { 
text-align: right; 
border-top: solid 1px #e4e4e4; 
padding: 5px 0; 
width: 383px; 
} 
.collapse_buttons a { 
margin-left: 15px; 
float: right; 
} 
.show_all_message { 
background: url(images/tall-down-arrow.gif) no-repeat right center; 
padding-right: 12px; 
} 
.show_recent_only { 
display: none; 
background: url(images/tall-up-arrow.gif) no-repeat right center; 
padding-right: 12px; 
} 
.collpase_all_message { 
background: url(images/collapse-all.gif) no-repeat right center; 
padding-right: 12px; 
color: #666666;
}

The code added in HTML is as follows:

<ol class="message_list"> 
<li> 
<p class="message_head"><cite> Zhang SAN :</cite> <span class="timestamp">1 Minutes ago </span></p> 
<div class="message_body"> 
<p> hello <br /> 
<br /> 
 This is the last message </p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite> Li si :</cite> <span class="timestamp">2 Minutes ago </span></p> 
<div class="message_body"> 
<p> Are you all right </p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite> Cathy :</cite> <span class="timestamp">1 Days ago, </span></p> 
<div class="message_body"> 
<p> For the first time to </p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite> Li si :</cite> <span class="timestamp">2 Days ago, </span></p> 
<div class="message_body"> 
<p> The top </p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite> Cathy :</cite> <span class="timestamp">3 Days ago, </span></p> 
<div class="message_body"> 
<p> support </p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite> Li si :</cite> <span class="timestamp">5 Days ago, </span></p> 
<div class="message_body"> 
<p> Hello, everyone </p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite> Zhang SAN :</cite> <span class="timestamp">6  Days ago, </span></p> 
<div class="message_body"> 
<p> Hello, everyone </p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite> Li si :</cite> <span class="timestamp">7 Days ago, </span></p> 
<div class="message_body"> 
<p> This is a good place. </p> 
</div> 
</li> 
<li> 
<p class="message_head"><cite> Cathy :</cite> <span class="timestamp">8  Days ago, </span></p> 
<div class="message_body"> 
<p> A good place </p> 
</div> 
</li> 
</ol> 
<p class="collapse_buttons"><a href="#" class="show_all_message"> Display all messages (9)</a> <a href="#" class="show_recent_only"> Only five messages are displayed </a> <a href="#" class="collpase_all_message"> Put all messages away </a></p> 
<br />

(link: http://xiazai.jb51.net/201407/yuanma/zdgusbook (jb51.net). Rar)