Beranda
»
Artikel
»
Cara Membuat Read More Dan Read Less Artikel Dengan Jquery

Cara Membuat Read More Dan Read Less Artikel Dengan Jquery

Tombol Read More dan Read Less pada suatu artikel merupakan tombol yang berfungsi untuk menampilkan konten dengan sifat opsional yaitu tampil sebagian atau tampil secara keseluruhan. Tombol Read More dan Read Less biasanya diperuntukkan bagi suatu halaman utama dengan konten yang cukup panjang namun memiliki ruang halaman yang sempit. Agar halaman memiliki ruang yang cukup dan lega, maka beberapa sub konten harus ditampilkan secara terpotong atau terpenggal sebagian kemudian disediakan tombol Read More untuk menampilkan konten secara keseluruhan.

Halaman yang memiliki tombol Read More dan Read Less berbeda dengan halaman yang memiliki tombol Read More tanpa tombol Read Less. Pada artikel sebelumnya Membuat Read More Pada Artikel Dengan PHP, memerlukan dua buah halaman yaitu halaman home dan halaman detail karena tidak menyertakan tombol Read Less. Namun jika terdapat tombol Read Less, artinya hanya terdapat satu buah halaman saja yang akan menampilkan konten secara opsional sebagian ataupun keseluruhan tergantung selera pengguna.

Membuat Read More Dan Read Less Artikel

Metode pembuatan halaman dengan Read More dan Read Less dilakukan dengan menambahkan tombol Read More pada ujung konten yang akan dipenggal. Jumlah karakter teks cuplikan yang ditampilkan sebagai preview biasanya memiliki rentang jumlah karakter antara 200 sampai dengan 350 buah karakter. Saat pengguna tombol Read More, maka konten keseluruhan akan tampil dengan diikuti tombol Read Less. Dan saat pengguna mengklik tombol Read Less, maka konten keseluruhan akan hilang dan digantikan dengan teks cuplikan.

Berikut halaman index dengan tambahan tombol Read More dan Read Less artikel :

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Portal Sains</title>
<style>
   body{margin:20px;}
   #readMore{
     display:inline-block;
     color:blue;
   }
   #readLess{
     display:none;
     color:blue;
   }
   #readMore:hover,#readLess:hover{
     color:navy;
     cursor:pointer;
     text-decoration:underline;
   }
   #moreText{
     display:none;
   }
   
</style>
</head>
<body>
<h1>Cahaya</h1>
<div>
   <p>Cahaya adalah energi berbentuk gelombang elektromagnetik yang kasat mata dengan panjang gelombang sekitar 380 - 750 nm.[1] Pada bidang fisika, cahaya adalah radiasi elektromagnetik, baik dengan panjang gelombang kasatmata maupun yang tidak.[2][3] Selain itu, cahaya adalah paket partikel yang disebut fot<span id="dots">...</span><span id="readMore"> Read More &raquo;</span><span id="moreText">on. Kedua definisi tersebut merupakan sifat yang ditunjukkan cahaya secara bersamaan sehingga disebut "dualisme gelombang-partikel". Paket cahaya yang disebut spektrum kemudian dipersepsikan secara visual oleh indra penglihatan sebagai warna. Bidang studi cahaya dikenal dengan sebutan optika, merupakan area riset yang penting pada fisika modern. Studi mengenai cahaya dimulai dengan munculnya era optika klasik yang mempelajari besaran optik seperti: intensitas, frekuensi atau panjang gelombang, polarisasi dan fase cahaya. Sifat-sifat cahaya dan interaksinya terhadap sekitar dilakukan dengan pendekatan paraksial geometris seperti refleksi dan refraksi, dan pendekatan sifat optik fisisnya yaitu: interferensi, difraksi, dispersi, polarisasi. Masing-masing studi optika klasik ini disebut dengan optika geometris (en:geometrical optics) dan optika fisis (en:physical optics). Pada puncak optika klasik, cahaya didefinisikan sebagai gelombang elektromagnetik dan memicu serangkaian penemuan dan pemikiran, sejak tahun 1838 oleh Michael Faraday dengan penemuan sinar katode, tahun 1859 dengan teori radiasi massa hitam oleh Gustav Kirchhoff, tahun 1877 Ludwig Boltzmann mengatakan bahwa status energi sistem fisik dapat menjadi diskrit, teori kuantum sebagai model dari teori radiasi massa hitam oleh Max Planck pada tahun 1899 dengan hipotesis bahwa energi yang teradiasi dan terserap dapat terbagi menjadi jumlahan diskrit yang disebut elemen energi, E. Sumber : https://id.wikipedia.org/wiki/Cahaya</span><span id="readLess"> &laquo; Read Less</span></p>
</div>
<script>
$(document).ready(function(){
   $('#readMore').click(function(){
     $("#dots,#readMore").css("display","none");
     $("#moreText,#readLess").css("display","inline");
   });
   $('#readLess').click(function(){
     $("#dots,#readMore").css("display","inline");
     $("#moreText,#readLess").css("display","none");
   });
});
</script>
</body>
</html>

Membuat Read More Dan Read Less Artikel Dengan Tag HTML Lengkap

Pada contoh di atas, hasil yang didapatkan hanya cocok diterapkan pada teks murni tanpa TAG HTML di dalamnya. Contoh di atas memiliki kelemahan yaitu teks ditampilkan secara apa adanya tanpa tambahan line break sehingga terkesan panjang, membosankan dan tidak rapi. Agar teks ditampilkan menjadi lebih terstruktur dapat menggunakan penyertaan TAG HTML di dalamnya.

Metode yang digunakan adalah dengan menciptakan dua buah konten dalam bentuk elemen TAG DIV, yang satu berfungsi sebagai teks cuplikan (preview) dan lainnya sebagai konten teks penuh. Saat teks cuplikan "citeText" tampil maka tombol Read More juga ikut tampil. Saat tombol Read More diklik, maka teks penuh "fullText" akan ditampilkan dan tombol Read Less akan muncul. Bersamaan dengan itu, konten cuplikan akan menghilang demikian juga tombol Read More.

Berikut halaman index dengan tambahan tombol Read More dan Read Less artikel dengan Tag HTML lengkap :

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Portal Sains</title>
<style>
   body{margin:20px;}
   #citeText{
     display:block;
   }
   #fullText{
     display:none;
   }
   #readMore{
     display:inline-block;
     color:blue;
   }
   #readLess{
     display:none;
     color:blue;
   }
   #readMore:hover,#readLess:hover{
     color:navy;
     cursor:pointer;
     text-decoration:underline;
   }
</style>
</head>
<body>
<h1>Cahaya</h1>
<div id="citeText">Cahaya adalah energi berbentuk gelombang elektromagnetik yang kasat mata dengan panjang gelombang sekitar 380 - 750 nm.[1] Pada bidang fisika, cahaya adalah radiasi elektromagnetik, baik dengan panjang gelombang kasatmata maupun yang tidak.[2][3] Selain itu, cahaya adalah paket partikel yang disebut fot<span id="dots">...</span><span id="readMore"> Read More &raquo;</span></div>
<div id="fullText">
<p>Cahaya adalah energi berbentuk gelombang elektromagnetik yang kasat mata dengan panjang gelombang sekitar380 - 750 nm.[1] Pada bidang fisika, cahaya adalah radiasi elektromagnetik, baik dengan panjang gelombang kasatmata maupun yang tidak.[2][3] Selain itu, cahaya adalah paket partikel yang disebut foton. Kedua definisi tersebut merupakan sifat yang ditunjukkan cahaya secara bersamaan sehingga disebut "dualisme gelombang-partikel".</p>
<p>Studi mengenai cahaya dimulai dengan munculnya era optika klasik yang mempelajari besaran optik seperti: intensitas, frekuensi atau panjang gelombang, polarisasi dan fase cahaya. Sifat-sifat cahaya dan interaksinya terhadap sekitar dilakukan dengan pendekatan paraksial geometris seperti refleksi dan refraksi, dan pendekatan sifat optik fisisnya yaitu: interferensi, difraksi, dispersi, polarisasi.</p>
<p>Pada puncak optika klasik, cahaya didefinisikan sebagai gelombang elektromagnetik dan memicu serangkaian penemuan dan pemikiran, sejak tahun 1838 oleh Michael Faraday dengan penemuan sinar katode, tahun 1859 dengan teori radiasi massa hitam oleh Gustav Kirchhoff, tahun 1877 Ludwig Boltzmann mengatakan bahwa status energi sistem fisik dapat menjadi diskrit, teori kuantum sebagai model dari teori radiasi massa hitam oleh Max Planck pada tahun 1899 dengan hipotesis bahwa energi yang teradiasi dan terserap dapat terbagi menjadi jumlahan diskrit yang disebut elemen energi, E. Sumber : https://id.wikipedia.org/wiki/Cahaya <span id="readLess"> &laquo; Read Less</span></p>
</div>
<script>
$(document).ready(function(){
   $('#readMore').click(function(){
     $("#dots,#readMore,#citeText").css("display","none");
     $("#fullText").css("display","block");
     $("#readLess").css("display","inline");
   });
   $('#readLess').click(function(){
     $("#citeText").css("display","block");
     $("#dots,#readMore").css("display","inline");
     $("#fullText,#readLess").css("display","none");
   });
});
</script>
</body>
</html>

Demikian tutorial bagaimana cara membuat Read More dan Read Less artikel dengan Jquery, Semoga bermanfaat .

27 Nov 2022 0 2.558

Kategori : html - javascript - jquery - php

facebook twitter whatapp linkedin pinterest

Halaman Terkait

Tinggalkan Balasan

Formulir ini hanya bagi member yang sudah terdaftar. Silahkan disini.

Belum terdaftar? silahkan queue Daftar disini.

Mengirim Komentar

Setiap pengunjung situs ini dapat memposting komentar disini, namun tidak semua komentar dapat ditampilkan. Gunakan kalimat baku bahasa Indonesia yang mudah dimengerti. Dilarang memposting kalimat yang berisi ujaran kebencian, SARA, pornografi, perjudian dan spam. Komentar harus sesuai dengan topik. Untuk bahasan lainnya yang lebih mendalam dapat menggunakan sarana forum. Anda dapat mengirimkan suatu pertanyaan dan member lainnya akan menjawab pertanyaan Anda.

Peringatan!

Apakah ingin menghapus komentar ini?

	Membuat Database Dan Tabel Melalui CMD Pada Xampp Server 60.189
	Daftar Kode ASCII 47.170
	Membuat Menu Navigasi Horisontal dan Vertikal Pada HTML 44.567
	Mendownload File Dengan Menggunakan PHP 28.612
	Validasi Form Menggunakan Plugin Validation Jquery 26.289
	Menggunakan Barcode Scanner Pada Aplikasi Berbasis Web 19.342
	Membuat Barcode Generator Dengan PHP 15.676
	Cara Mudah Membuat QR Code Generator Dengan PHP 14.698
	Merubah Warna Latar Text Editor Notepad++ 13.734
	Perbedaan Antara fungsi rand() dan mt_rand() Pada PHP 11.708

Visitor Name
Email