Membuat Show More Dengan Bootstrap Dan Jquery

Hallo teman – teman semuanya, lama tak berjumpa. Kembali lagi pada tips dan trik Dumet School, di artikel kemarin saya sudah membahas tentang Belajar Membuat Show More Konten Dengan Jquery
dimana dalam pembuatannya masih menggunakan css biasa. Pada kesempatan kali ini kita akan update latihannya tentang Membuat Show More Dengan Bootstrap Dan Jquery yaitu kita akan membuat sebuah tampilan dengan bootstrap supaya terlihat responsive kemudian kita berikan fungsi show more nya dengan jQuery. Nah di bawah ini adalah screen shoot yang nanti kita akan buat

Ketika di klik Show More maka konten akan dimunculkan dan ditambahkan 3 konten, dan kita lihat pada tampilan mobile tampilannya seperti ini

Tampilan di mobile juga responsive, baik sekarang kita akan latihan Membuat Show More Dengan Bootstrap Dan Jquery seperti gambar di atas ini. Pertama – tama install terlebih dahulu bootstrapnya, teman – teman bisa download di website resminya di getbootstrap.com, jika sudah download extract di dalam folder sehingga menghasilkan folder seperti gambar di bawah ini

Kemudian isikan script seperti gambar di bawah ini

Save dengan nama index.html, lalu hapus script <h1>Hello Word</h1> dan berikan script di bawah ini

<div class="container"><br>      <div class="row"><br>          <div class="col-xs-6 col-sm-6 col-md-4 product">
            <img src="img.jpg" class="img-responsive">
            <div class="caption">
              <h3>Android Keren</h3>
              <p>Saat ini sedang banyak di cari oleh konsumen</p>
              <p style="color: red"><strike>Rp. 2.300.000,-</strike></p>
              <p>Rp. 2.000.000,-</p>
              <p><a href="#" class="btn btn-primary" role="button">Detail</a> <a href="#" class="btn btn-default" role="button">Buy</a></p>
            </div>
        </div><br>    </div><br></div><br>

Teman – teman bisa perbanyak konten dengan mencopy script semua yang ada di dalam class row agar isi konten bisa di show more, jika sudah teman – teman tambahkan css nya

.product{display: none}
      .totop {
        position: fixed;
        bottom: 10px;
        right: 20px;
        background: #a4a29f;
        padding: 5px;
        display: block;
        border-radius: 50%;
        color: white;
        font-size: 12px;
    }

Dan tambahkan juga fungsi jQuery untuk Show More dan Back To top nya

$(function () {
          $(".product").slice(0, 6).show();
          $("#loadMore").on('click', function (e) {
              e.preventDefault();
              $(".product:hidden").slice(0, 3).slideDown();
              $('html,body').animate({
                  scrollTop: $(this).offset().top
              }, 1200);
          });
      });
      $('.totop').on('click', function(event){
          event.preventDefault();
          $('body,html').animate({
            scrollTop: 0 ,
            }
          );
        });

Jika sudah save dan jalankan pada browsernya, maka tampilan berhasil di buat

Jika di klik maka show more sudah berfungsi, dan begitu juga back to top. Bagaimana simple dan mudah bukan..??

Mungkin sekian dulu pada artikel kali ini tentang Membuat Show More Dengan Bootstrap Dan Jquery, kita berjumpa kembali pada artikel yang akan datang. Teman – teman experimen sendiri dari latihan kali ini supaya menghasilkan tampilan yang di inginkan, semoga bermanfaat.

Terima Kasih dan Sampai Jumpa.

Membuat Show More Dengan Bootstrap Dan Jquery

Kategori