将更多内容添加到第一个p标记并隐藏后内容？

Question

HTML结构。

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

现在，我想在默认状态下在第一段之后添加more<<文本。其他段落是隐藏的，只显示第一段内容。点击more<<然后显示其余段落内容。有没有办法通过jquery或javascript来获取它？

Answer 1

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

点击一次以显示所有<p>'s，再次点击隐藏它们。

查看http://jsfiddle.net/FUMuJ/

上的工作示例

以下是另一个示例，其中more在点击和返回时更改为less

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

查看http://jsfiddle.net/FUMuJ/1/

上的工作示例