Javascript-implemented foldable message board (with source code download) _ javascript tips-js tutorial

You may have seen the message board, but not many of them can be folded. This article provides a good foldable message board. If you are interested, you can learn the javaScript Code 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 ;}); // display all messages $ (". show_all_message "). click (function () {$ (this ). hide () $ (". show_recent_only "). show () $ (". message_list li: gt (4 )"). slideDown () return false ;}); // only display the latest message $ (". show_recent_only "). click (function () {$ (this ). hide () $ (". show_all_message "). show () $ (". message_list li: gt (4 )"). slideUp () return false ;});});

The css code 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;}

Add the following code to HTML:

 
 
 
  
  
 
John:1 minute ago
 
 
Hi!
 
This is the last message.
 
 
 
  
  
 
Li Si:2 minutes ago
 
 
You too
 
 
 
  
  
 
Wang Wu:1 day ago
 
 
First time
 
 
 
  
  
 
Li Si:2 days ago
 
 
Top
 
 
 
  
  
 
Wang Wu:3 days ago
 
 
Supported
 
 
 
  
  
 
Li Si:5 days ago
 
 
Hello everyone
 
 
 
  
  
 
John:6 days ago
 
 
Hello everyone
 
 
 
  
  
 
Li Si:Seven days ago
 
 
Nice here
 
 
 
  
  
 
Wang Wu:8 days ago
 
 
Good place
 
 
 
 
 
 
Show all messages (9) show only five messages hide all messages
 

Download case