Load more button PHP, Laravel, WordPress

Load more button PHP, Laravel, WordPress

 

HTML:

@foreach($medies as $media)

  <div class="col-md-3 p-3 content">

      content

  </div>

@endforeach

<button id="loadMore" type="button">Load more</button>

JS:

//load more

$(document).ready(function(){

    $(".content").slice(0, 8).show();

    $("#loadMore").on("click", function(e){

        e.preventDefault();

        $(".content:hidden").slice(0, 8).slideDown();

        if($(".content:hidden").length == 0) {

        $("#loadMore").text("No Content").addClass("noContent");

        }

    });

})

CSS:

/*load more*/

.content {

    display: none;

  }

  #loadMore {

    display: block;

    transition: .3s;

  }

  #loadMore:hover {

    text-decoration: none;

  }

  .noContent {

    pointer-events: none;

  }