Halo sobat, berjumpa kembali dengan saya Hernowo pada tips dan trik Dumet School. Pada kesempatan kali ini saya akan memberikan tips tentang Belajar Membuat Show More Konten Dengan Jquery dan kita akan langsung mempraktekkannya juga. Sebelum kita mulai, untuk apa sih show more konten itu..?? Show more konten saat ini banyak di gunakan pada website toko online, fasion, dan website lainnya. Show more ini gunanya sama seperti pagination bedanya kalau pagination umumnya menggunakan nomor untuk menampilkan halaman lainnya, dan pada show more kita hanya perlu klik show maka konten akan tampil. Tidak jauh berbeda ya teman – teman, mungkin nanti bisa di tambahkan di website agar lebih berfariasi. Untuk saat ini show more memang lagi banyak digunakan, di bawah ini daalah contoh menggunakan show more
Ketika di klik show more products konten yang di sembunyikan akan di munculkan
Dengan konten yang berbeda, baik kali ini kita akan praktekkan seperti gambar di atas ini tetapi saya buat lebih sederhana dan diharapkan teman – teman nanti bisa di kembangkan lagi dari hasil latihan kali ini. Baik, pertama – tama siapkan text editornya dan buat script html nya
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Belajar Membuat Show More Konten Dengan Jquery</title> </head> <body> </body> </html>
Save terlebih dahulu dengan nama index.html, kemudian isikan script nya di bawah ini
<div>01Content</div> <div>02Content</div> <div>03Content</div> <div>04Content</div> <div>05Content</div> <div>06Content</div> <div>07Content</div> <div>08Content</div> <div>09Content</div> <div>10Content</div> <div>11Content</div> <div>12Content</div> <div>13Content</div> <div>14Content</div> <div>15Content</div> <div>16Content</div> <div>17Content</div> <div>18Content</div> <div>19Content</div> <div>20Content</div> <div>21Content</div> <div>22Content</div> <div>23Content</div> <div>24Content</div> <div>25Content</div> <div>26Content</div> <div>27Content</div> <div>28Content</div> <div>29Content</div> <div>30Content</div> <div>31Content</div> <div>32Content</div> <div>33Content</div> <div>34Content</div> <div>35Content</div> <div>36Content</div> <div>37Content</div> <div>38Content</div> <div>39Content</div> <div>40Content</div> <div>41Content</div> <div>42Content</div> <div>43Content</div> <div>44Content</div> <div>45Content</div> <div>46Content</div> <div>47Content</div> <div>48Content</div> <div>49Content</div> <a href="#" id="loadMore">Load More</a> <a href="" class="totop">Back to top</a>
Pastekan script di atas ini di dalam tag <body>, saya buat tag div dengan banyak 49 content agar nanti teman – teman tahu hasilnya dan bisa di scroll kemudian di bawah nya saya berikan tombol untuk show more dan back to top. Jika sudah, tambahkan css nya di bawah ini
body {
background-color: #f6f6f6;
width: 400px;
margin: 20px auto;
font: normal 13px/100% sans-serif;
color: #444;
}
div {
display:none;
padding: 10px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
margin-bottom: 5px;
background-color: #f1f1f1;
}
.totop {
position: fixed;
bottom: 10px;
right: 20px;
background: orange;
padding: 5px;
display: block;
}
a, a:visited {
color: #33739E;
text-decoration: none;
display: block;
margin: 10px 0;
}
a:hover {
text-decoration: none;
}
#loadMore {
padding: 10px;
text-align: center;
background-color: #33739E;
color: #fff;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
transition: all 600ms ease-in-out;
}
#loadMore:hover {
background-color: #fff;
color: #33739E;
}
Langkah berikutnya kita implementasikan Belajar Membuat Show More Konten Dengan Jquery , teman – teman jangan lupa load terlebih dahulu library jQuery nya kalian bisa ambil langsung dari website resminya di jQuery.com atau bisa juga copy link di bawah ini
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
Berikan link ini di dalam tag head, baru selanjutnya kita berikan jQuery fungsi show more nya. Teman – teman bisa tambahkan script jQuery nya di bawah ini
<script>
$(function(){
$("div").slice(0, 4).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$("div:hidden").slice(0, 12).slideDown();
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1200);
});
});
</script>
Letakkan tepat di atas tag tutup </body>, save dan jalankan pada borser nya maka hasilnya seperti gambar di bawah ini
Jika di klik load more maka konten akan di munculkan sampai nomor terakhir yaitu 49content
Berikutnya kita berikan fungsi jQuery nya untuk back to top
$('.totop').on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}
);
});
Jika sudah save dan refresh pada browsernya, maka ketikan konten sudah paling bawah ketika klik tombol back to top maka konten akan kembali ke nomor 1 atau kembali ke atas.
Inilah fungsi show more yang saat ini banyak di gunakan pada website toko online, teman – teman nanti di kembangkan lagi dari hasil latihan kali ini mungkin nanti bisa menggunakan bootstrap supaya lebih bagus lagi hasilnya. Baik, sekian pada artikel kali ini tentang Belajar Membuat Show More Konten Dengan Jquery kita berjumpa kembali pada artikel yang akan datang yang akan memberikan tips dan trik seputar dunia website. Terimakasih dan Sampai Jumpa.
Semoga bermanfaat 🙂