1//start the javascript
2$(function () {
3 $('span').click(function () {
4 $('#datalist li:hidden').slice(0, 2).show();
5 if ($('#datalist li').length == $('#datalist li:visible').length) {
6 $('span ').hide();
7 }
8 });
9});
10//end the javascript
11
12
13//start the css
14ul li:nth-child(n+3) {
15 display:none;
16}
17ul li {
18 border: 1px solid #aaa;
19}
20span {
21 cursor: pointer;
22 color: #f00;
23}
24//end the css
25
26
27
28//start the html
29<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
30<ul id="datalist">
31 <li>dataset1</li>
32 <li>dataset1</li>
33 <li>dataset2</li>
34 <li>dataset2</li>
35 <li>dataset3</li>
36 <li>dataset3</li>
37 <li>dataset4</li>
38 <li>dataset4</li>
39 <li>dataset5</li>
40 <li>dataset5</li>
41</ul>
42<span>readmore</span>
43
44
45//end the html
46