制作一个“;加载更多”;按钮，在我的博客上再显示2篇文章

我想制作一个按钮或链接，点击后将显示我存储在索引中的下两个div（文章）。有点像无限滚动滚动滚动效果。这是我所能接近的。要么不显示任何div，要么显示所有div。

 <div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <div class="post-preview">
                <a href="post.html">
                    <h2 class="post-title">
                        Title
                    </h2>
                    <h3 class="post-subtitle">
                        Description
                    </h3>
                </a>
                <p class="post-meta">Posted by <a href="#">Trevor Healy</a> on September 24, 2014</p>
            </div>
            <hr>
            <div class="post-preview">
                <a href="post.html">
                    <h2 class="post-title">
                        Title
                    </h2>
                    <h3 class="post-subtitle">
                        Description
                    </h3>
                </a>
                <p class="post-meta">Posted by <a href="#">Trevor Healy</a> on September 18, 2014</p>
            </div>
 <!-- Pager -->
            <ul class="pager">
                <li class="next">
                    <a href="#" id="load">Older Posts &rarr;</a>
                </li>
            </ul>

            <hr>
            <div class="post-preview">
                <a href="post.html">
                    <h2 class="post-title">
                        Title
                    </h2>
                    <h3 class="post-subtitle">
                        Description
                    </h3>
                </a>
                <p class="post-meta">Posted by <a href="#">Trevor Healy</a> on August 24, 2014</p>
            </div>
            <hr>
            <div class="post-preview">
                <a href="post.html">
                    <h2 class="post-title">
                        Title
                    </h2>
                    <h3 class="post-subtitle">
                        Description
                    </h3>
                </a>
                <p class="post-meta">Posted by <a href="#">Trevor Healy</a> on July 8, 2014</p>
            </div>
            <hr>
            </div>
    </div>
</div>

我有一个css文件，其中存储：

.post-preview { display:none; }

这是我在页面上运行的脚本：

    <script>
$(function(){
    $(".post-preview").slice(0, 2).show(); // select the first two
    $("#load").click(function(e){ // click event for load more
        e.preventDefault();
        $(".post-preview:hidden").slice(0, 2).show(); // select next two hidden divs and show them
    });
});
 </script>