Load More using Jquery

Live Demo
http://www.bibekshakya.com/demo/jquery/load-more/

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Load More</title>
  <!-- google font -->
  <link href="https://fonts.googleapis.com/css?family=Muli:300,600" rel="stylesheet">
  <!-- custom style -->
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="posts">
    <!-- holder -->
    <div class="holder">
      <!-- title -->
      <div class="title">
        <h2><a href="#">Atqui perpetua intellegam eam</a></h2>
        <div class="meta">
          <time datetime="2018-09-01">Sep 1, 2018</time>
          <span>by</span>
          <a href="#">Admin</a>
        </div>
      </div>
      <!-- content -->
      <div class="content">
        <p>Eu omnis commune erroribus est, sumo nobis vitae pro an. Mel ex modo possit prompta, vim intellegam
          contentiones eu. Amet torquatos vituperatoribus ei est, purto homero cu sed. Quo ex purto movet, assum
          delenit dissentias pro in. Atqui perpetua intellegam eam ex, mea hinc solet audiam id.</p>
      </div>
      <!-- tags -->
      <ul class="tags">
        <li><a href="#">Corporate</a></li>
        <li><a href="#">IT</a></li>
        <li><a href="#">Microsoft</a></li>
      </ul>
    </div>
    <!-- holder -->
    <div class="holder">
      <!-- title -->
      <div class="title">
        <h2><a href="#">Cu his lorem dicta perfecto</a></h2>
        <ul class="meta">
          <time datetime="2018-08-28">Aug 28, 2018</time>
          <span>by</span>
          <a href="#">Microsoft</a>
        </ul>
      </div>
      <!-- content -->
      <div class="content">
        <p>Cu sed sumo latine, pri iuvaret expetenda te. Cu his lorem dicta perfecto, est eu tollit tempor legimus. Ut rebum delenit tractatos vel, tale unum pertinacia ex sea, vel id inermis tractatos. Eum tale illum ne. Est paulo omittantur te, ferri prima verterem eu pri, pri et malis philosophia. Est nihil libris virtute ex.</p>
      </div>
      <!-- tags -->
      <ul class="tags">
        <li><a href="#">Google</a></li>
        <li><a href="#">Microsoft</a></li>
      </ul>
    </div>
    <!-- holder -->
    <div class="holder">
      <!-- title -->
      <div class="title">
        <h2><a href="#">Id vim omnium maluisset</a></h2>
        <ul class="meta">
          <time datetime="2018-08-22">Aug 22, 2018</time>
          <span>by</span>
          <a href="#">Google</a>
        </ul>
      </div>
      <!-- content -->
      <div class="content">
        <p>Nam iusto vivendo tacimates in, te utinam fastidii usu, eos dolorem periculis ut. Per at epicuri scaevola qualisque. Errem recusabo ne nec. Novum fuisset ea vel, sit iusto iracundia te. Ut mei euripidis efficiendi, usu id inermis tacimates. Id vim omnium maluisset. Cum minim luptatum assueverit in, velit volumus pericula at vix.</p>
      </div>
      <!-- tags -->
      <ul class="tags">
        <li><a href="#">Business</a></li>
        <li><a href="#">Sharepoint</a></li>
      </ul>
    </div>
    <!-- holder -->
    <div class="holder">
      <!-- title -->
      <div class="title">
        <h2><a href="#">Admodum maiorum pertinacia</a></h2>
        <ul class="meta">
          <time datetime="2018-08-18">Aug 18, 2018</time>
          <span>by</span>
          <a href="#">Admin</a>
        </ul>
      </div>
      <!-- content -->
      <div class="content">
        <p>Simul dolor diceret ius cu, impedit deleniti ius ne, et minim deseruisse sit. Admodum maiorum pertinacia qui te. Primis fuisset noluisse pro ex. Quo te possit fuisset expetenda.</p>
      </div>
      <!-- tags -->
      <ul class="tags">
        <li><a href="#">Pinterest</a></li>
        <li><a href="#">Linkedin</a></li>
      </ul>
    </div>
    <!-- holder -->
    <div class="holder">
      <!-- title -->
      <div class="title">
        <h2><a href="#">Pri nibh brute simul in</a></h2>
        <ul class="meta">
          <time datetime="2018-08-10">Aug 10, 2018</time>
          <span>by</span>
          <a href="#">Linkedin</a>
        </ul>
      </div>
      <!-- content -->
      <div class="content">
        <p>Ei usu iuvaret scripserit. Duo aliquid delenit ut, ex pro option suscipit. Pri nibh brute simul in, sit ut mollis aeterno fabellas. Qui at cetero philosophia, eam ad diam numquam. Consul nonumes in mei. Zril homero aperiam duo ex, est graecis contentiones ad, ceteros sententiae incorrupte nam ut. An est scripta disputando.</p>
      </div>
      <!-- tags -->
      <ul class="tags">
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Amazon</a></li>
        <li><a href="#">CEO</a></li>
      </ul>
    </div>
    <!-- btn holder -->
    <div class="btnHolder">
      <button id="btnMore" class="btn">Load More</button>
    </div>
  </div>
  <!-- jquery cdn -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <!-- custom script -->
  <script src="js/main.js"></script>
</body>

</html>

CSS Code (css/main.css)
/* 
-------
GENERAL 
-------
*/

* {
  margin: 0;
  padding: 0;
}

body {
  font: 16px/1.6 'Muli', serif;
  background: #f1f1f1;
  color: #333;
}

h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 5px;
}

a {
  color: #f45f42;
  text-decoration: none;
  transition: color 0.3s linear;
}

.btn {
  background: #f45f42;
  border: 0;
  color: #fff;
  padding: 15px;
  width: 100%;
  display: inline-block;
  vertical-align: top;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s linear;
}

.btn:hover,
.btn:focus {
  outline: none;
  box-shadow: none;
  background: #e62e0a;
}

/* 
----
TAGS 
----
*/

.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.tags:before {
  content: 'Tags:';
  margin: 0 10px 0 0;
}

.tags li {
  display: inline-block;
  vertical-align: top;
  margin: 0 5px 0 0;
  position: relative;
}

.tags li:last-child:after {
  display: none;
}

.tags li:after {
  content: ',';
}

/* 
-----
POSTS
-----
*/

.posts {
  max-width: 1024px;
  margin: 30px auto;
  padding: 0 15px;
}

.posts .holder {
  display: none;
  background: #fff;
  padding: 20px;
  margin: 0 0 30px;
}

.posts .content {
  padding: 20px 0;
  margin: 20px 0;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}

.posts h2 a {
  color: #333;
}

.posts h2 a:hover {
  color: #f45f42;
}

JS Code (js/main.js)
/*
---------
LOAD MORE
---------
*/


Video Tutorial


Updated Code (js/main.js)
$('.posts .holder').slice(0,2).show();

$('#btnMore').on('click', function() {
  $('.posts .holder:hidden').slice(0,1).slideDown();
  if($('.posts .holder:hidden').length === 0) {
    $('#btnMore').fadeOut();
  }
});


Share this

Related Posts