U3F1ZWV6ZTU1MTYyNTY0NTFfQWN0aXZhdGlvbjYyNDkxNTc4MDk4

code إظهار و إخفاء محتوى محدد من الموضوع أو الصفحة

طريقة إظهار و إخفاء المحتوى عبر Code JavaScript

code إظهار و إخفاء محتوى محدد من الموضوع أو الصفحة

عند كتابة أي تدوينة أو مقالة قد تكون في بعض الأحيان طويلة نوعاً ، أو قد تكون تحتوي على مجموعة من الصور أو من الأزرار التفاعلية الموجودة ضمن النص أو ضمن المقالة.
و لكي لا يشعر القارئ بالملل من طول المقالة أو من أجل عمل تفاعل ضمن المقالة للزائر نحتاج أحياناً لإخفاء بعض المحتوى في المقالة و إظهاره بشكل تفاعلي عند ضغط الزائر على أي زر من الأزرار التي سوف نضعها من أجل عمل حدث ما، و هذا الحدث هو إظهار المزيد ضمن الصفحة أو إظهار أي محتوى يتم إخفائه ضمن هذا الكود، و لغة الحدث المُستخدمة في الحدث هي javascript .

بعض الأمثلة عن توظيف الكود :

- تستطيع توظيف الكود ضمن المقالة بأن تضع للزائر رسالة مُعينة أو تنبيه أو ملاحظة و تظهر له أثناء الضغط ضمن الصفحة ..... الخ .
- وضع صورة مخفية للزائر تتعلق بفقرة من فقرات الموضوع و تظهر للزائر لمجرد عمل الزر و الكتابة عليه " إظهار الصورة " كمثال ، و هذا يُفيد أيضاً بسرعة تحميل الصفحة إذا قُمت بإخفاء الصور .
- عمل مسابقة أو أسئلة معددة و عمل أكثر من زر و تسمية كل زر على حدة بإسم محدد ليظهر للزائر هذا القسم أثناء الضغط على الزر .

و الإستعمالات كثيرة أيضاً للكود بحسب حاجتك له و توظيفه له ، كل ما عليك عمله هو حُسن استغلال الكود من أجل خدمتك لإثراء موضوعك الذي تُقدمه للزائر لإضفاء جمالية و حرفية للموضوع و ليس استغلاله بشكل خاطئ يعود عليك و على زوارك بنتائج غير جيدة .

شرح الكود و التعديلات الممكنة على الكود :

أكواد الـ css

background: لتغيير لون خلفية الزر بحسب ما يتناسب مع ألوان موقعك أو مدونتك
border:1px حجم حواف الزر من الخارج، تستطيع تغيير القيمة بما يناسبك بالإضافة إلى اللون المُرفق ضمن الكود
border-radius:50px درجة إنحاء الحواف الخارجية للزر، تستطيع تكبيرها و تصغيرها كما تجده مناسب لك
cursor:pointer: إظهار شكل اليد على الزر عند مرور الماوس فوقه
padding:10px تباعد الحواف داخلياً ضمن الزر، تستطيع أيضاً تغيير القيمة بما تراه مُناسباً لك

مُلاحظات مُهمة :

- إذا أردت تغيير اسم الـ id الموجود ضمن الكود يجب أن تقوم بتغييره من جميع الأماكن الموجودة ضمن الكود لضمان عمل الكود بشكل سليم.
- إذا أردت عمل أكثر من زر ضمن المقالة الواحد يجب عليك تغيير اسم الـ id في كل مرة تقوم بإضافة أو نسخ الكود ضمن المقالة الواحد، مثال :
لنفترض أنه تريد إخفاء ثلاثة أقسم ضمن المقالة الواحدة ، فالذي يجب عليك عمله هو كالتالي :
- بعد نسخ الكود و وضعه للقسم الأول ، نقوم بنسخ الكود ثلاث مرات و وضعه ضمن القسم المُراد إخفائه .
- نقوم بتغيير اسم الـ id بإسم خاص بالقسم لكي نعلم بأنه تابع له إذا أردنا أن نعدل عليه ، أو عبر أضافة أرقام بجانب اسم الـ id

id="show-hide"
id="show-hide-1"
id="show-hide-2"



يمكنك تجربة عمل الكود عبر الضغط هنا



ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة

تم الكشف عن مانع الإعلانات

الإعلانات تساعدنا في تمويل موقعنا، فالمرجو تعطيل مانع الإعلانات وساعدنا في تقديم محتوى حصري لك. شكرًا لك على الدعم ❤️