showing results for - "how to create show more item in javascript"
Daniel
20 Jan 2018
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