Skip to main content

Show Hide Content Dengan Jquery Di Postingan

Lagi iseng-iseng ngecek speed blog di PageSpeed Insights, tertarik juga untuk membuat show hide content-nya yaitu show hide yang menampilkan masalah-masalah pada blog yang harus diperbaiki. Pasti Anda semua sudah mengetahu show hide content tersebut yang ada di PageSpeed.

Itung-itung menambah koleksi macam-macam show hide content, maka kali ini saya mencoba membuat show hide content ala Google ini dengan versi saya dengan bantuan jquery.

Bagi yang tertarik untuk mencobanya, silahkan coba dan copy kode-kodenya pada iframe JSFiddle di bawah ini.


Perhatikan pada kode css .text-area p dengan tinggi (height) auto, sehingga tinggi teks areanya mengikuti banyaknya content yang dibuat. Jika Anda ingin menentukan tinggi teks areanya maka tinggal ganti kode auto pada height dengan angka pada satuan px seperti contoh 80px. Dan tambahkan kode overflow: auto untuk konten yang melebihi tinggi yang kita tentukan, seperti pada iframe JSFiddle di bawah ini.


Dan satu lagi saya juga membuat show hide content yang banyak digunakan di forum-forum Google seperti pada iframe JSFiddle di bawah ini.


Karena ini menggunakan jquery, maka template Anda wajib memasang jquery library berapa pun versinya seperti di bawah ini. Jika sudah ada maka abaikan ini.


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

Selamat mencoba...

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB