今天为大家介绍一款新的jQuery特效，为jQuery实现的可收缩面板效果。即我们常见的一个面板上面有内容文字，通过控制面板的一个点击部位即可实现内容的收缩隐藏。
首先给大家分析一下代码的实现过程。
1: 隐藏<div class="message_body">里第一个元素以后的元素
2: 隐藏所有第5个<li>后面的元素
3: 当<p class="message_head">被点击里，显示/隐藏<div class="message_body">
4: 当<a class="collpase_all_message"> 被点击时，上提所有<div class="message_body">的元素
5: 当<a class="show_all_message"> 被点击，隐藏它，并显示<a class="show_recent_only">，并下拉第5个<li>以后的元素
6: 当<a class="show_recent_only"> 被点击时，隐藏它，并显示<a class="show_all_message">，并上提第5个 <li>以后的元素
关键的JS代码如下：
$(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; });
大家还是先看一下整体效果图吧。
