Load More Button

Load More Button

 <div class="container text-center">
        <div class="row">
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
            <div class="col-md-4">
                <div class="content"></div>
            </div>
        </div>
    <a href="" class="load-more">Load More</a>
    </div>

main.js

$(function () {
        $(".col-md-4").slice(0, 3).show();
        $("body").on('click touchstart', '.load-more', function (e) {
            e.preventDefault();
            $(".col-md-4:hidden").slice(0, 3).slideDown();
            if ($(".col-md-4:hidden").length == 0) {
                $(".load-more").css('visibility', 'hidden');
            }
            $('html,body').animate({
                scrollTop: $(this).offset().top
            }, 1000);
        });
    });

style.css

.container{
  margin:30px auto;
}

.col-md-4{
  display:none;
}

.content{
  background-color:#333;
  height:200px;
  margin:10px 0;
  border:1px solid #ccc;
}

.load-more{
  background-color:#000;
  color:#fff !important;
  padding:5px 10px;
  border-radius:4px;
  font-size:20px;
  margin:50px 0;
  display:inline-block;
}

.load-more:hover{
  background-color:blue;
  text-decoration:none;
}