أرشيف انكور
(نسخة قابلة للطباعة من الموضوع)
https://archive.iinkor.com/t1322
أنقر هنا لمشاهدة الموضوع بهيئته الأصلية

تعرف على كيفية إنشاء زر "اقرأ المزيد - اقرأ أقل" باستخدام JavaScript.
Admin 05-12-2020 01:02 مساءً
بسم الله الرحمن الرحيم

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

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


ومن ثم نضيف الكود التالي في اخر الكود وهو كود زر اقرأ المزيد
CODE
<button onclick="myFunction()" id="myBtn">اقرأ المزيد</button>


وهنا نضيف كود الـ css التالي في ورقة الـ css او بين وسمي <style>
CODE
#more {display: none;}<br />


ونضيف الان كود جافا سكربت والذي هو اساس الكود ليعمل بشكل كامل وممتاز
CODE
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";
  }
}


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

Copyright © 2009-2025 PBBoard® Solutions. All Rights Reserved