Js-implemented foldable message board (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 ;}); // 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:

<Ol class = "message_list"> <li> <p class = "message_head"> <cite> James: </cite> <span class = "timestamp"> 1 minute ago </span> </p> <div class = "message_body"> <p> Hello <br/> <br/> This is the last message </p> </div> </li> <p class = "message_head"> <cite> li Si: </cite> <span class = "timestamp"> 2 minutes ago </span> </p> <div class = "message_body"> <p> You </p> </div> </li> <p class = "message_head"> <cite> Wang Wu: </cite> <span class = "timestamp"> 1 day ago </span> </p> <div class = "message_body"> <p> first time </p> </div> </li> <p class = "message_head"> <cite> li Si: </cite> <span class = "timestamp"> 2 days ago </span> </p> <div class = "message_body"> <p> top </p> </div> </li> <p class = "message_head"> <cite> Wang Wu: </cite> <span class = "timestamp"> 3 days ago </span> </p> <div class = "message_body"> <p> supported </p> </div> </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> <p class = "message_head"> <cite> James: </cite> <span class = "timestamp"> 6 days ago </span> </p> <div class = "message_body"> <p> Hello everyone </p> </div> </li> <p class = "message_head"> <cite> li Si: </cite> <span class = "timestamp"> seven days ago </span> </p> <div class = "message_body"> <p> good news </p> </div> </li> <p class = "message_head"> <cite> Wang Wu: </cite> <span class = "timestamp"> 8 days ago </span> </p> <div class = "message_body"> <p> 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"> collapse all message </a> </p> <br/>

Download case