Cara Membuat Read More dengan JQuery

Membuat Read More dapat dilakukan dengan banyak cara. Kali ini saya akan menjelaskan bagaimana membuat Read More pada web page dengan jQuery Expander Plugin. jQuery Expander Plugin adalah plugin JQuery sederhana untuk menyembunyikan dan menampilkan sebagian text sehingga user hanya perlu membaca sebagian text saja.


Berikut cara sederhana untuk membuat read/more sebuah tulisan.
1. Download file jquery.expander.js dan jquery.expander.js.
2. Copy Script berikut kedalam file html anda (bagian head)

<script type="text/javascript" src="jquery-1.4.4.min.js">
    </script>
    <script type="text/javascript" src="jquery.expander.js">
    </script>
    <script type="text/javascript">
        $(function () {
            $('div.readmore').expander({
                slicePoint: 20,
                expandText: 'More',
                userCollapseText: 'Less'
            });
        });
    </script>
  
   Perhatikan $('div.readmore') pada script diatas. Script ini membaca elemen yang berisi text yang akan kita tampilkan. kemudian, slicePoint adalah variabel yang berisi banyaknya text yang akan ditamplikan pertama sekali. Kemudia expandText adalah variabel yang berisi link-text untuk menampilkan semua text dan userCollapseText link-text untuk kembali ke posisi semula.

3. Berikut contoh text yang digunakan.

<div style="width:400px;background-color:#E3E3E3;" class="readmore">
    Kemarin aku memberanikan diri untuk bertemu sendiri dengan dokter itu, karena kalau bukan diriku sendiri masalah ini sepertinya tidak akan selesai. Aku menunggu sampai anak yang ujian hingga pukul 10.30 akan masuk.
"Dek, yang pukul 10.30 masuk," kata abang penjaga Skills Lab.
Setelah semua masuk, aku hampiri abang itu dengan agak takut.
"Bang, dokter Hidayatnya ada ga? Saya yang kemarin salah jadwal OSCE..."
"Ada, ayo ikut abang."
Perlahan-lahan serasa ada banyak burung merpati terbang mengelilingi aku lalu mengangkatku hingga ke angkasa, duuh, senangnya.

"Dokternya lagi rapat, kamu tunggu di sini."
Aku menunggu di depan gudang, dokternya masih ada di dalam. Tak lama dokternya lewat di depanku menuju ruang rapat, dengan gerakan kaki yang cepat dan terkesan terburu-buru. Aku diam mematung dengan hanya ekor mataku yang menatap lurus ke dokter itu. Aku ga berani lagi memanggil beliau.

Setelah rapat selesai, dokternya sambil menenteng notebook berjalan menuju gudang, lalu aku hampiri,
"Dok, saya mau lapor, kemarin saya ga ikut OSCE."
"Kenapa, Dek?"
"Saya salah lihat jadwal, saya mengingat jadwal teman saya, Dok."
"Oh, yaudah kamu buat surat aja yang isinya gini, bla bla bla bla. Besok kamu bisa ikut ujian OSCE."
"Benaran, Dok?!" kataku setengah tak percaya.
"Iya."
"Makasih banyak, Dok."

Aku berlari serasa berlari di sungai yang jernih dengan ada biasan pelangi di air yang aku pecah menjadi buih-buih dengan kakiku. Ahh, aku sungguh beruntung dengan berkat Tuhan yang satu ini, terimakasih Bapa...
Akhirnya hari ini aku bisa ikut OSCE, suatu pelajaran yang sangat berharga agar aku selalu teliti dalam bertindak.  
    </div> 

4. Simpan filenya dan jalankan di browser.

Perhatikan hasilnya, jika ada yang salah, silahkan tinggalkan komentar.
Jangan lupa di like ya :)

Kunjungi juga http://gesroseline.blogspot.com/