تعرف على كيفية إنشاء زر "اقرأ المزيد - اقرأ أقل" باستخدام JavaScript.

[Admin]

بسم الله الرحمن الرحيم



تعرف على كيفية إنشاء زر "اقرأ المزيد - اقرأ أقل" باستخدام JavaScript.

مثال على الكود :

شرح انشاء الكود :

في البداية نقوم بتحضير النص المراد استعماله ويفضل يكون اكثر من سطرين ومن ثم نقوم باضافة الاكواد التالية بداخله وقسم النص الظاهر بالنص الخفي

<span id="dots">...</span><span id="more">

كما في المثال التالي :

<p>شركة انكور التطويرية لدعم وتطوير المواقع والمنتديات العربية باحدث الطرق المتاحة مجانا مع تقديم المساعدة المقدور عليها والعديد من الدورات و<span id="dots">...</span><span id="more">الشروحات اللازمة لاصحاب المواقع و المنتديات .. العديد من الحصريات التي ستجدونها لدينا من اكواد واستايلات وسكربتات وقوالب .. عملنا على العديد من المجالات وتميزنا بها .. اهلا بكم في عالمنا</span></p>

ومن ثم نضيف الكود التالي في اخر الكود وهو كود زر اقرأ المزيد

<button onclick="myFunction()" id="myBtn">اقرأ المزيد</button>

وهنا نضيف كود الـ css التالي في ورقة الـ css او بين وسمي <style>

#more {display: none;}

ونضيف الان كود جافا سكربت والذي هو اساس الكود ليعمل بشكل كامل وممتاز

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 = "اقرأ المزيد"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "اخفاء باقي النص"; 
    moreText.style.display = "inline";
  }
}

انتهى الشرح

بالتوفيق للجميع ان شاء الله

يرجى ذكر المصدر عند النقل : شركة انكور التطويرية

والسلام ختام​