Cara Membuat Tombol Show Less Dan Show More Di WordPress Menggunakan CSS dan JavaScript.
Kami mengucapkan banyak-banyak terima kasih bagi para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktunya untuk mengunjungi ataupun hanya sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web teknologi[dot]visitklaten[dot]com ini dan diri kami menjadi lebih baik dan lebih baik lagi.
Dalam artikel kali ini Kami akan berbagi cara membuat tombol Show Less Dan Show More dengan CSS dan JS di wordpress. Untuk membuatnya sangat mudah. Dalam kesempatan kali ini kami akan berbagi caranya dan sobat teknologi[dot]visitklaten[dot]com hanya tinggal copy paste saja dan sedikit pengeditan sesuai kebutuhan.
Show Less Dan Show More ini akan sangat berguna bagi yang mungkin tidak menginginkan pagination dan ingin menampilkan semua file dalam satu halaman saja. Dalam hal ini berupa tombol “Show More” yang apabila di klik akan muncul data/gambar/file selanjutnya. Dan tombol “Show Less” yang apabila di klik akan mengurangi data/gambar/file.
Yuk langsung saja kita simak penjelasan dari kami. Dalam hal ini kami menggunakan tambahan CSS dari bootstrap. Untuk caranya hampir sama dengan artikel kami sebelumnya di https://teknologi.visitklaten.com/wordpress/membuat-tombol-load-more hanya sedikit berbeda di bagian JS. Yuk capcuzzz
Membuat Tombol Show Less Dan Show More
HTML
HTML dibawah ini hanyalah sekedar contoh yang bisa diganti dalam model lain seperti gambar atau postingan ataupun lainnya.
<div class="loadmore-frame3">
<div class="ast-container text-center p-1">
<div class="row m-0 justify-content-center align-items-center">
<div class="col-md-4">
<div class="content">1</div>
</div>
<div class="col-md-4">
<div class="content">2</div>
</div>
<div class="col-md-4">
<div class="content">3</div>
</div>
<div class="col-md-4">
<div class="content">4</div>
</div>
<div class="col-md-4">
<div class="content">5</div>
</div>
<div class="col-md-4">
<div class="content">6</div>
</div>
<div class="col-md-4">
<div class="content">7</div>
</div>
<div class="col-md-4">
<div class="content">8</div>
</div>
<div class="col-md-4">
<div class="content">9</div>
</div>
<div class="col-md-4">
<div class="content">10</div>
</div>
<div class="col-md-4">
<div class="content">11</div>
</div>
<div class="col-md-4">
<div class="content">12</div>
</div>
<div class="col-md-4">
<div class="content">13</div>
</div>
<div class="col-md-4">
<div class="content">14</div>
</div>
<div class="col-md-4">
<div class="content">15</div>
</div>
</div>
<button class="load-more btn btn-blue-gradient btn-lg w-75 mt-3">Load More</button>
</div>
</div>
CSS
Harap diperhatikan atau dipastikan div atau frame di konten harus di display none. Sedangkan untuk style lainnya menyesuaikan kebutuhan.
.loadmore-frame3 .col-md-4{
display:none;
padding: .5rem;
}
.loadmore-frame3 .content {
background-color: #333;
height: 200px;
width: 100%;
border: 1px solid #ccc;
color: #fff;
font-size: 50px;
line-height: 200px;
}
JS
Di bagian “var x = 3” angka tiga(3) bisa diganti dengan yang lain sesuai kebutuhan semisal 6. Jika 6 di “var x = 3” maka yang pertama muncul adalah 6 .
jQuery(document).ready(function($){
var size_li = $(".loadmore-frame3 .col-md-4").size();
var x = 3;
size_li = $(".loadmore-frame3 .col-md-4").size();
x=3;
$('.loadmore-frame3 .col-md-4:lt('+x+')').show();
$('.loadmore-frame3 .loadMore').click(function () {
x= (x+6 <= size_li) ? x+6 : size_li;
$('.loadmore-frame3 .col-md-4:lt('+x+')').show();
$('.loadmore-frame3 .col-md-4:lt('+x+')').fadeIn("slow");
$('html,body').animate({ scrollTop: $(this).offset().top - 300}, 1000);
});
$('.loadmore-frame3 .showLess').click(function () {
x=(x-6<0) ? 3 : x-6;
$('.loadmore-frame3 .col-md-4').not(':lt('+x+')').hide();
$('.loadmore-frame3 .col-md-4').not(':lt('+x+')').fadeOut("slow");
$('html,body').animate({ scrollTop: $(this).offset().top - 300}, 1000);
});
});
Kelebihan jika menggunakan metode ini yaitu dengan CSS dan JavaScript adalah mudah, simple, dan tidak terlalu ribet. Adapun kekurangannya mungkin karena menggunakan display none maka ketika loading awal web akan terasa lebih lambat.
Dalam kesempatan berikutnya InsyaAllah akan kami share cara membuat load more menggunakan ajax sehingga saat load awal tidak lambat (masih dipelajari karena masih belajar juga hehehehe….).
Untuk tampilan Show Less Dan Show More bisa dilihat dibawah ini.
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar