jQuery-可收缩面板-白红宇

可收缩的面板（像Gmai收件箱面板l）。可以应用在文章、新闻评论列表中。见图效果：

js:

                  
<style type=
"text/css"
>
        
*
        
{ 
            
margin
: 
0
;
            
padding
: 
0
;
        
}
        
body
        
{ 
            
margin
: 
10px
auto
;
            
width
: 
570px
;
            
font
: 
75%
/
120%
Arial
, 
Helvetica
, 
sans-serif
;
        
}
        
p
        
{ 
            
padding
: 
0
0
1em
;
        
}
        
/* message display page */
        
.message_list
        
{ 
            
list-style
: 
none
;
            
margin
: 
0
;
            
padding
: 
0
;
            
width
: 
383px
;
        
}
        
.message_list li
        
{ 
            
padding
: 
0
;
            
margin
: 
0
;
            
background
: 
url
(images/collapsible-panels/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/collapsible-panels/tall-down-arrow.gif) 
no-repeat
right
center
;
            
padding-right
: 
12px
;
        
}
        
.show_recent_only
        
{ 
            
display
: 
none
;
            
background
: 
url
(images/collapsible-panels/tall-up-arrow.gif) 
no-repeat
right
center
;
            
padding-right
: 
12px
;
        
}
        
.collpase_all_message
        
{ 
            
background
: 
url
(images/collapsible-panels/collapse-
all
.gif) 
no-repeat
right
center
;
            
padding-right
: 
12px
;
            
color
: 
#666666
;
        
}
    
</style>
         
       

someone: 1 minute ago

Hello Nick,

This is the latest message display. The rest are collapsed by default

nick: 2 minutes ago

message here

someone: 1 day ago

message here

nick: 2 days ago

message here

someone: 3 days ago

message here

nick: 5 days ago

message here

someone: 6 days ago

message here

nick: 7 days ago

message here

someone: 8 days ago

message here

Show all message (9) Show 5 only Collapse all

作者：

出处：

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.

http://www.cnblogs.com/wangyuelang0526/archive/2012/06/04/2534745.html