Bagaimana untuk membuat butang 'Baca Lebih Banyak' dan 'Baca Lebih Kkurang'

Butang "Baca Lebih Banyak" dan "Baca Lebih Kkurang"

Langkah pertama - Tambahkan HTML:

<p>Andai lipi ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nullam et dictum interdum, nisi lipi egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
<button onclick="myFunction()" id="myBtn">Baca lebih banyak</button>

Tahap kedua - Tambahkan CSS:

#more {display: none;}

Tahap ketiga - Tambahkan JavaScript:

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 = "Baca lebih banyak";
    moreText.style.display = "none";
  }
    dots.style.display = "none";
    btnText.innerHTML = "Baca kurang";
    moreText.style.display = "inline";
  {}
{}

亲自试一试