How To

Cara Membuat Read More Read Less Button

Di bawah ini kita akan mempelajari cara membuat tombol atau button “Read More Read Less” dengan JavaScript. Button atau tombol ini biasanya digunakan pada sebuah konten yang memiliki text panjang, jadi pembaca bisa membaca dengan lengkap atau hanya sekilas dengan menggunakan tombol ini.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>

<h2>Contoh Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet<span id="dots">...</span><span id="more">Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS.Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS </span></p>
<button >var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

</body>
</html>

Read More Read Less Button

Langkah 1) Tambahkan HTML:
Contoh

<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet<span id="dots">...</span><span id="more">Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS. Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS.Belajar cara membuat REad More Less Button Bersama Menggunakan Jvascript dan CSS </span></p>
<button >

Langkah 2) Tambahkan CSS:
Contoh

#more {display: none;}

Langkah 3) Tambahkan JavaScript:
Contoh

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

Hanifah Nurbaeti

Share
Tags: buttonHow Tohtml dan css