how to create show more item in javascript
//start the javascript
$(function () {
$('span').click(function () {
$('#datalist li:hidden').slice(0, 2).show();
if ($('#datalist li').length == $('#datalist li:visible').length) {
$('span ').hide();
}
});
});
//end the javascript
//start the css
ul li:nth-child(n+3) {
display:none;
}
ul li {
border: 1px solid #aaa;
}
span {
cursor: pointer;
color: #f00;
}
//end the css
//start the html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id="datalist">
<li>dataset1</li>
<li>dataset1</li>
<li>dataset2</li>
<li>dataset2</li>
<li>dataset3</li>
<li>dataset3</li>
<li>dataset4</li>
<li>dataset4</li>
<li>dataset5</li>
<li>dataset5</li>
</ul>
<span>readmore</span>
//end the html
Also in JavaScript:
- jQuery Arrow Keys Binding Examples
- javascript confirm yes no
- route with parameter react not working not found
- how to download array of files from aws s3 using aws sdk in nodejs
- js array as parameter
- javascript multiply arguments
- jQuery hasClass() - check for more than one class
- decimal to base 32 javascript
- check if word is in string javascript
- lowercase javascript
- Javascript pong game
- nodejs get current directory
- javascript array find
- check for internet explorer browser in javascript
- in angular how to get router url without query params
- the original image of nodejs image
- sort array of numbers in array in javascript
- javascript open url
- timezone in react js
- link stylesheet in javascript
- eslint ignore javascript
- javascript subtract days from date
- javascript count elements in json object
- javascript random six digit number with animation