Javascript 如何使用js/jquery show/hide在我的页面上实现showmore按钮

我有一个包含40个项目的页面。但我不希望所有的40个故事一次都显示在一个页面上。 我没有ajax知识。因此，在不使用任何ajax的情况下，如何在我的页面上实现显示更多功能，以便使用纯jquery/js hide或show而不是ajax在页面上一次只显示10个项目？

试试：

HTML:

---

现在没有太多时间来解释，为你起草了一些东西

---

祝你好运。

你试过什么吗？没有，我只是想知道怎么做。嘿，是的，我可以在6分钟内接受堆栈溢出：。还有一个问题：如果我有x个项目怎么办。不仅仅是40&不管数字是多少，我希望每页只显示10个。我所有的东西都在一个盒子里。因此，每个项目都是一个项目。如果是这样的话？@kiki你应该把它们放在所有故事的10个项目中

<div id="text1">text</div>
<div id="text2">text</div>
<div id="text3">text</div>    
<div id="text4">text</div>
<br><br>
<div id="button">Show more</div>

 var count=2;
 $( "#button" ).click(function() {
 $( "#text"+count ).show();
 count++;
        });

$(function(){
$show = 4;
$articles = $("#newsblock>.news");

$update = function()
{
    $vis = 0;
    $pos = 0;
    $articles.each(function(ind,obj)
    {
        $pos++;
        $(this).css({"display":($pos>$show)?'none':'block'});

        if ($pos<=$show) { $vis++; }
    });

    if ($vis == $articles.length)
    {
        $("#btnMore").css({"display":"none"});   
    }
};
$update();

$btnMore = $("<div />").attr({"id":"btnMore"});
$btnMore.html("Show more");
$btnMore.click(function()
{
    $show = $show + 2;
    $update();
});
$("body").append($btnMore);
});

<div id="newsblock">
<div class="news" data-id="1">Lorem Ipsum blah blah</div>
<div class="news" data-id="2">Lorem Ipsum blah blah</div>
<div class="news" data-id="3">Lorem Ipsum blah blah</div>
<div class="news" data-id="4">Lorem Ipsum blah blah</div>
<div class="news" data-id="5">Lorem Ipsum blah blah</div>
<div class="news" data-id="6">Lorem Ipsum blah blah</div>
<div class="news" data-id="7">Lorem Ipsum blah blah</div>
<div class="news" data-id="8">Lorem Ipsum blah blah</div>
<div class="news" data-id="9">Lorem Ipsum blah blah</div>
<div class="news" data-id="10">Lorem Ipsum blah blah</div>
</div>