<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Read more list by Whidy</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul class="list">
<li>hello? I wanna see you :D</li>
<li>...</li>
<li>zzz</li>
<div class="more">Click here to see whidy smile</div>
<li>-</li>
<li>you are not here!</li>
<li>:(</li>
<li>zzz</li>
<div class="more">Ooops, ToT, find it again.</div>
<li>-</li>
<li>I gotcha you, whidy.</li>
<li>Hei!</li>
<li><img src="http://www.whidy.net/wp-includes/images/smilies/icon_mrgreen.gif" /></li>
<li>a simple demo ended by <b>whidy</b>.z</li>
<div class="more">haha</div>
</ul>
</body>
</html>
body {color:#444;}
ul {list-style:none;}
.more {font-size: 80%; color:#888;}