jQuery change append onClick
<p>I have the following jQuery code which locates the <code>ul</code> element on the page, hides any <code>li</code> items after the third item within that <code>ul</code> element and appends a <em>"Show More!"</em> text link which reveals/toggles the hidden list items when clicked.</p>

<pre><code>$('ul')
    .find('li:gt(2)')
    .hide()
    .end()
    .append(
        $('&lt;li&gt;Show More!&lt;/li&gt;').click( function(){
        $(this).siblings().toggle(500);
        })
    );
</code></pre>

<p><strong>An example of the script's functionality: <a href="http://jsfiddle.net/vf6j5/" rel="nofollow">http://jsfiddle.net/vf6j5/</a></strong></p>

<p>Here's what I'd like the script to do: When the hidden elements are revealed after <em>"Show More!"</em> is clicked, I'd like the <em>"Show More!"</em> text to be replaced with <em>"Show Less!"</em>. Doing this would be much more user friendly and make a bit more sense.</p>

<p>Any ideas on how this could be accomplished?</p>
