Jquery, hide & show list items after nth item

Question

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> 

Answer 1

Try the following code example:

$('ul li:gt(3)').hide(); $('.show_button').click(function() {     $('ul li:gt(3)').show(); });