Membuat Show More Dengan Bootstrap Dan Jquery

Hallo teman – teman semuanya, lama tak berjumpa. Kembali lagi di tips dan trik Source Code Aplikasi, di artikel kemarin saya telah membahas mengenai Belajar Membuat Show More Konten Dengan Jquery

dimana pada pembuatannya masih menggunakan css lazimnya. Di kesempatan kali ini kita akan update latihannya mengenai Membuat Show More Dengan Bootstrap Dan Jquery yaitu kita akan merancang sebuah tampilan dengan bootstrap supaya terlihat memiliki tampilan yang dinamis kemudian kita berikan guna show more nya dengan jQuery. Nah di bawah ini ialah screen shoot yang nanti kita akan bikin

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

Tampilan di mobile pun memiliki tampilan yang dinamis, bagus kini kita akan latihan Membuat Show More Dengan Bootstrap Dan Jquery seperti gambar di atas ini. Pertama-tama – tama install terlebih dahulu bootstrapnya, teman – teman dapat unduh di blog resminya di getbootstrap.com, apabila telah unduh extract di pada 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>Ketika 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 dapat perbanyak konten dengan mencopy script seluruh yang terdapat di pada class row agar isi konten dapat di show more, apabila telah 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 pun guna jQuery bagi 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 ,
            }
          );
        });

Kalau telah save dan jalankan di browsernya, karenanya tampilan berhasil di bikin

Kalau di klik karenanya show more telah berfungsi, dan seperti itu pun back to top. Bagaimana simple dan gampang bukan..??

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

Terima Kasih dan Hingga Jumpa.

Sumber https://kursuswebsite.org