Foldable message board implemented by js (with source code 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; 
}); 

//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 only the most recent messages$(".show_recent_only").click(function(){ 
$(this).hide() 
$(".show_all_message").show() 
$(".message_list li:gt(4)").slideUp() 
return false; 
}); 

});

Part of the code of css 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/) 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/) no-repeat right center; 
padding-right: 12px; 
} 
.show_recent_only { 
display: none; 
background: url(images/) no-repeat right center; 
padding-right: 12px; 
} 
.collpase_all_message { 
background: url(images/) no-repeat right center; 
padding-right: 12px; 
color: #666666;
}

Add code to HTML as follows:

&lt;ol class="message_list"&gt; 
&lt;li&gt; 
&lt;p class="message_head"&gt;&lt;cite&gt;Zhang San:&lt;/cite&gt; &lt;span class="timestamp"&gt;1Minutes ago&lt;/span&gt;&lt;/p&gt; 
&lt;div class="message_body"&gt; 
&lt;p&gt;Hello&lt;br /&gt; 
&lt;br /&gt; 
This is the last message&lt;/p&gt; 
&lt;/div&gt; 
&lt;/li&gt; 
&lt;li&gt; 
&lt;p class="message_head"&gt;&lt;cite&gt;Li Si:&lt;/cite&gt; &lt;span class="timestamp"&gt;2Minutes ago&lt;/span&gt;&lt;/p&gt; 
&lt;div class="message_body"&gt; 
&lt;p&gt;You're good too&lt;/p&gt; 
&lt;/div&gt; 
&lt;/li&gt; 
&lt;li&gt; 
&lt;p class="message_head"&gt;&lt;cite&gt;Wang Wu:&lt;/cite&gt; &lt;span class="timestamp"&gt;1Day ago&lt;/span&gt;&lt;/p&gt; 
&lt;div class="message_body"&gt; 
&lt;p&gt;First time&lt;/p&gt; 
&lt;/div&gt; 
&lt;/li&gt; 
&lt;li&gt; 
&lt;p class="message_head"&gt;&lt;cite&gt;Li Si:&lt;/cite&gt; &lt;span class="timestamp"&gt;2Day ago&lt;/span&gt;&lt;/p&gt; 
&lt;div class="message_body"&gt; 
&lt;p&gt;top&lt;/p&gt; 
&lt;/div&gt; 
&lt;/li&gt; 
&lt;li&gt; 
&lt;p class="message_head"&gt;&lt;cite&gt;Wang Wu:&lt;/cite&gt; &lt;span class="timestamp"&gt;3Day ago&lt;/span&gt;&lt;/p&gt; 
&lt;div class="message_body"&gt; 
&lt;p&gt;support&lt;/p&gt; 
&lt;/div&gt; 
&lt;/li&gt; 
&lt;li&gt; 
&lt;p class="message_head"&gt;&lt;cite&gt;Li Si:&lt;/cite&gt; &lt;span class="timestamp"&gt;5Day ago&lt;/span&gt;&lt;/p&gt; 
&lt;div class="message_body"&gt; 
&lt;p&gt;Hello everyone&lt;/p&gt; 
&lt;/div&gt; 
&lt;/li&gt; 
&lt;li&gt; 
&lt;p class="message_head"&gt;&lt;cite&gt;Zhang San:&lt;/cite&gt; &lt;span class="timestamp"&gt;6 Day ago&lt;/span&gt;&lt;/p&gt; 
&lt;div class="message_body"&gt; 
&lt;p&gt;Hello everyone&lt;/p&gt; 
&lt;/div&gt; 
&lt;/li&gt; 
&lt;li&gt; 
&lt;p class="message_head"&gt;&lt;cite&gt;Li Si:&lt;/cite&gt; &lt;span class="timestamp"&gt;7Day ago&lt;/span&gt;&lt;/p&gt; 
&lt;div class="message_body"&gt; 
&lt;p&gt;It's good here&lt;/p&gt; 
&lt;/div&gt; 
&lt;/li&gt; 
&lt;li&gt; 
&lt;p class="message_head"&gt;&lt;cite&gt;Wang Wu:&lt;/cite&gt; &lt;span class="timestamp"&gt;8 Day ago&lt;/span&gt;&lt;/p&gt; 
&lt;div class="message_body"&gt; 
&lt;p&gt;Good place&lt;/p&gt; 
&lt;/div&gt; 
&lt;/li&gt; 
&lt;/ol&gt; 
&lt;p class="collapse_buttons"&gt;&lt;a href="#" class="show_all_message">Show all messages(9)</a> <a href="#" class="show_recent_only">Show only five messages</a> <a href="#" class="collpase_all_message">Collapse all messages</a></p>&lt;br /&gt;

Case download