Show Hide Content Dengan Jquery Di Postingan

Show Hide Content
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...
Mohon ma'af saya baru bisa mengucapkan "Minal 'aidin wal faidzin, mohon ma'af lahir dan bathin, selamat Hari Raya Idul Fitri 1435 H. semoga kita selalu dalam lindungan-Nya...amiin".

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments