أرشيف انكور
(نسخة قابلة للطباعة من الموضوع)
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