Setiap kita mengunjungi sebuah website artikel, website portal berita, dan website yang berhubungan dengan informasi, anda pasti di suguhkan dengan sebuah tulisan yang terkadang sangat panjang, dan yang perlu teman-teman perhatikan setiap kita ingin membaca artikel yang ingin kita baca, pasti kita harus mengelicknya terlebih dahulu untuk membaca kelanjutannya, dan pada hari ini kita akan Membuat Tombol Read More dengan Jquery, oke jangan kemana-mana simak terus ya teman-teman.
Mungkin yang nanti saya buat caranya bukan sebenarnya yang ada di sebuah website seperti wordpress dan lain-lain , tetapi jika saya lihat dengan cara ini saya juga bisa membuatnnya seperti itu, oke Membuat Tombol Read More dengan Jquery, cukup simple ko teman-teman, jadi disini saya tinggal menyebunyikan teksnya terlebih dahulu, lalu ketika teman-teman mengclick tombol baca selangkapnya atau read more, teks yang sebelumnya tidak terlihat bisa tampil, seperi itu ya, oke dari pada berlama-lama langsung saja lihat contoh kode HTMLnya seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<html> <head> <title>Membuat Tombol Read More dengan Jquery</title> <style> .container{ width: 500px; margin: auto; text-align: justify; border: 2px dotted blue; padding: 5px; } .baca_selengkapnya{ color:blue; cursor: pointer; } h1{ text-align: center; } </style> </head> <body> <div class="container"> <h1>Membuat Tombol Read More dengan Jquery</h1> jQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML. Dewasa ini, jQuery merupakan pustaka JavaScript yang paling populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. <span class="baca_selengkapnya">Baca Selengkapnya...</span> <div class="pesan"> <p> Dikutip dari link wikipedia, jQuery itu bersifat gratis, dan bersifat kode sumber terbuka dibawah lisensi MIT. Sintaks pada jQuery didesain untuk memudahkan dalam navigasi sebuah dokumen, pemilihan elemen DOM, pembuatan animasi, penanganan event, dan pengembangan aplikasi berbasis Ajax. jQuery juga menyediakan kemampuan bagi para pengembang untuk dapat membuat plug-in pada pustaka JavaScript ini. Ini memungkinan mereka untuk membuat abstraksi pada interaksi dan animasi tingkat-rendah, efek lanjutan, serta tampilan widget yang dapat dimodifikasi. Pendekatan modular pada jQuery memungkinkan kita dalam pembuatan halaman Web yang dinamis dan aplikasi berbasis Web yang ajib. Sekumpulan fitur inti jQuery—yakni pemilihan elemen DOM, transferal dan manipulasi—dimungkinkan berkat adanya selector engine yang bernama Sizzle (sejak versi 1.3), yang membuat sebuah "gaya pemrograman baru", memadukan antara algoritme dan data struktur DOM. Gaya ini dipengaruhi oleh arsitektur JavaScript lainnya seperti YUI v3 dan Dojo, yang nantinya menstimulasi pembuatan standar Selector API. Microsoft dan Nokia membundle jQuery pada platfoem mereka. Microsoft mengikut sertakannya dengan Visual Studio di dalam pembuatan ASP.NET AJAX dan framework ASP.NET MVC miliknya. Sementara itu, Nokia meng-integrasikannya di dalam platform pengembangan widget Web Run-Time. jQuery juga telah digunakan di MediaWiki sejak versi 1.16.</p> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { $(".pesan").hide(); $(".baca_selengkapnya").click(function(){ $(".pesan").slideDown('slow'); $(this).hide(); }) }); </script> </body> </html> |
Silahkan teman-teman copy saja kode di atas dan silahkan di coba, jika berhasil maka akan tampil seperti ini:
gamabar sebelum di click tombol baca selengkapnya dan di di bawah ini setelah di click selengkapnya.
oke cukup sampai disini belajar kita tentang Membuat Tombol Read More dengan Jquery, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.