طريقة إظهار و إخفاء المحتوى عبر Code JavaScript
عند كتابة أي تدوينة أو مقالة قد تكون في بعض الأحيان طويلة نوعاً ، أو قد تكون تحتوي على مجموعة من الصور أو من الأزرار التفاعلية الموجودة ضمن النص أو ضمن المقالة.
و لكي لا يشعر القارئ بالملل من طول المقالة أو من أجل عمل تفاعل ضمن المقالة للزائر نحتاج أحياناً لإخفاء بعض المحتوى في المقالة و إظهاره بشكل تفاعلي عند ضغط الزائر على أي زر من الأزرار التي سوف نضعها من أجل عمل حدث ما، و هذا الحدث هو إظهار المزيد ضمن الصفحة أو إظهار أي محتوى يتم إخفائه ضمن هذا الكود، و لغة الحدث المُستخدمة في الحدث هي 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"
يمكنك تجربة عمل الكود عبر الضغط هنا
إرسال تعليق