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


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

تعرف على كيفية إنشاء زر "اقرأ المزيد - اقرأ أقل" باستخدام Javas c r i p t.
مثال على الكود :
32311
شرح انشاء الكود :
في البداية نقوم بتحضير النص المراد استعماله ويفضل يكون اكثر من سطرين ومن ثم نقوم باضافة الاكواد التالية بداخله وقسم النص الظاهر بالنص الخفي
<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";
  }
}


انتهى الشرح
بالتوفيق للجميع ان شاء الله
يرجى ذكر المصدر عند النقل : شركة انكور التطويرية
والسلام ختام