如何创建：“阅读更多”和“阅读更少”按钮

学习如何使用 JavaScript 创建“阅读更多 - 阅读更少”按钮。

示例文本

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel ... 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.

أزرار "قراءة المزيد" و "قراءة أقل"

الخطوة الأولى - إضافة HTML:

<p>لوريم إيبسم دوار، كونسيكتيتور أديسينغ إليت. فاسيلوس إمبيرديت، نولا إيت ديكتم إنتردوم، نيس لوريم إيجيستاس فيتا سكيل<span id="dots">...</span><span id="more">يريكيريس إنليم ليجولا فينناتيس دور. مايكناس نيسل إيست، ألتريكس نيك كونكه إيت، أوكتيور فيتا ماسا. فيوسكوس لوتكوس فيستيبرول أوجويوت أليكيت. نون ساجيتتيس ديكتم نيس، سيد ألومكوربر إيپسوم دينيسيم أكس. إن أت ليبرو سيد نون فينناتيس إمبيرديت سيد أورنار توركيس. دونك فيتي دوي إيت تلوس جراتيدا فينناتيس. إنتريغيللا كونكوغا إيروس نون فيرمنتوم. سيد دابيبوس بولفينار نيبه تيمبور بورتو.</p>
<button onclick="myFunction()" id="myBtn">Read more</button>

الخطوة الثانية - إضافة CSS:

#more {display: none;}

الخطوة الثالثة - إضافة 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 = ";Read more";
    moreText.style.display = ";none";
  }
    dots.style.display = ";none";
    btnText.innerHTML = ";Read less";
    moreText.style.display = "inline";
  }
}

تجربة بنفسك