title: jQuery load more content divs
body: <p>I am trying to use jQuery to hide a chunk of divs and use a button to show more. </p>
  
  <p>However, since  my divs are inline-block, they are not being hidden.</p>
  
  <p>Only the first 8 divs should be shown, the rest should be hidden. </p>
  
  <p>Once I have that working I will work on show button.</p>
  
  <p>Similar to the older post button on this website: 
  <a href="https://melodydemo.wordpress.com/" rel="nofollow noreferrer">https://melodydemo.wordpress.com/</a></p>
  
  <p>Here is my jQuery for hiding and showing the divs:</p>
  
  <pre><code>$(function () {
      $("div").slice(0, 8).show();
      $("#loadMore").on('click', function (e) {
          e.preventDefault();
          $("div:hidden").slice(0, 8).slideDown();
          if ($("div:hidden").length == 0) {
              $("#load").fadeOut('slow');
          }
          $('html,body').animate({
              scrollTop: $(this).offset().top
          }, 1500);
      });
  });
  
  $('a[href=#top]').click(function () {
      $('body,html').animate({
      scrollTop: 0
      }, 600);
      return false;
  });
  
  $(window).scroll(function () {
      if ($(this).scrollTop() &gt; 50) {
           $('.totop a').fadeIn();
      } else {
          $('.totop a').fadeOut();
      }
  });    
  </code></pre>
  
  <p>Here is the codepen of my attempt: </p>
  
  <p><a href="https://codepen.io/kastex/pen/RowYLL" rel="nofollow noreferrer">https://codepen.io/kastex/pen/RowYLL</a></p>