Say I have an unordered list, like so:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
How would I, using JQuery, hide the last 2 list items and have a 'show more' link there, so when clicked upon, the last 2 list items would appear?
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li style="display:none;">Four</li>
<li style="display:none;">Five</li>
<li>Show More</li>
</ul>
Try the following code example:
$('ul li:gt(3)').hide();
$('.show_button').click(function() {
$('ul li:gt(3)').show();
});