add more to the first p tag and make the after content hide?

the H开发者_开发技巧TML structure.

<div id="content">
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>
</div>

now, i want to add a more<< text after the first paragraph, under default state. the others paragraph are hide, only display the first paragraph content. when click the more<< then show the rest paragraph content. is there a way to get this by jquery or javascript?

$('p:gt(0)').hide();
$('.more').click(function() {
    $('#content').find('p:gt(0)').slideToggle();
})

Click once to show all <p>'s, click again to hide them.

Check working example at http://jsfiddle.net/FUMuJ/

Here's another example where more changes to less when clicked on and back

$('p:gt(0)').hide();
$('.more, .less').click(function() {
    $('#content').find('p:gt(0)').slideToggle();
    $('.more, .less').toggle();
})

Check working example at http://jsfiddle.net/FUMuJ/1/