Cara Membuat Read More Read Less Button

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 29, 2021

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 onclick="myFunction()" id="myBtn">Read more</button>

<script>
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";
  }
}
</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 onclick="myFunction()" id="myBtn">Read more</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";
  }
}