Javascript 向第一个p标记添加更多内容并隐藏后面的内容？

HTML结构

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

现在，我想再添加一个

单击一次可显示所有的
，再次单击可隐藏它们

在

下面是另一个示例，单击“上一步”和“下一步”时，
more
将更改为
less

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

在
检查工作示例是的，有一种方法。这就是你需要的全部信息，还是你想让我们告诉你怎么做？伙计们，别这么苛刻。它不需要分配工作。玉米的彼得，如果可以，我想你可以给我一些指导，现在，我想选择第一个p。如何选择它。我知道$（'p'）。first（）可以选择第一个p。但我想增加一个条件。要在内容中进行选择。怎么办？谢谢，这个p:gt（0）是什么意思？jquery会添加更多文本。默认html结构不会在第一个parafraph之后添加更多文本。
p:gt（0）
mean大于第一个p。0表示第一个
p
谢谢，明白了。但是默认的html结构是aaaaa
，您不能添加更多或更少的默认值。有没有办法达到这种效果？如果你想用jQuery添加它。检查更新的示例，我将其放入$（“#content>p:gt（0）”）.append（“| more | less”）；在编写代码之前，但它无法工作。
$('p:gt(0)').hide();
$('.more, .less').click(function() {
    $('#content').find('p:gt(0)').slideToggle();
    $('.more, .less').toggle();
})