I am interested in creating a script that can toggle between "show more" and "show less" functionality for elements in a list. I came across this script:
HTML
<ul id="myList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>
CSS
#myList li{ display:none;
}
#loadMore {
color:green;
cursor:pointer;
}
#loadMore:hover {
color:black;
}
#showLess {
color:red;
cursor:pointer;
}
#showLess:hover {
color:black;
}
JQUERY
$(document).ready(function () {
size_li = $("#myList li").size();
x=3;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+5 : size_li;
$('#myList li:lt('+x+')').show();
if(x<=3){$('#showLess').hide();}
});
$('#showLess').click(function () {
x=(x-5<0) ? 3 : x-5;
$('#myList li').not(':lt('+x+')').hide();
});
});
https://jsfiddle.net/6FzSb/1550/
Now, I am curious about the functioning of javascript lines 6 and 10, as well as how to hide the "show more" button when all entries are displayed, and how to hide the "show less" button when only 3 entries are left to show.