زر إظهار وإخفاء (نص , صورة , فيديو ,كود) - بلوجر

بسم الله الرحمن الرحيم والصلاة والسلام على رسول الله , عند بداية عملي لتصميم موقع (bc4arab) والمختص بعرض البرودكاستات العربية , خطرت لي فكرة لعرض البرودكاست في الموقع , وهي عن طريق الـ show /  hide ,, أي إظهار /إخفاء , بحيث ان البرودكاست يكون مخفي , وعندما تضغط على عنوان البرودكاست يظهر محتواه في الأسفل , ميزة هذه الطريقة إنك تستطيع إخفاء أي قطعة أو إضافة تبغاها , يعني ممكن تخفي صورة او رابط او فيديو او كود او اي اشي , تظهرها بمجرد الضغط على الز.

مثل ماذكرت تستطيع إخفاء أي اضافة او كود او سكربت , وتستطيع جعل القطعة المخفية في نفس التدوينة مثل مافعلت انا , او في العامود الجانبي او حتى في اعلى المدونة او اسفلها , في اي مكان تريد .

تستخدم هذه الاضافة عادة لمزيد من التنظيم ولتقليص القطع والاضافات الكثيرة , وكذلك اخفاء القطع التي تاخذ حيزا كبير في المدونة .

شرح التركيب

1 توجه  الى لوحة التحكم / تصميم / إضافة أداة ثم اخترHTML/JAVASCRIPT

2 انسخ هذا الكود والصقه مباشرة

<button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" style="background: #da3838; border: 1px solid#000000;color:#ffffff" title="Click to show/hide content" type="button">Show/hide</button>

<div id="spoiler1" style="display:none"> 

هنا تضع النص او الصورة او الكود المراد اخفاءه 

</div> 

ضبط خصائص الكود:

• لتغيير لون خلفية الزر , استبدل الكود  #da3838 بكود الون اللي تريده


• لتغيير لون نص الزر ,  استبدل الكود #ffffff بكود الون اللي تريده


• لتغيير لون حدود الزر , استبدل الكود #000000 بكود الون اللي تريده

ملاحظة هامة جدا !!

إذا اردت إخفاء اكثر من قطعة في نفس الصفحة - مثل ما انا عملت فوق واخفيت قطعتين اللي هي البرودكاست و نموذج الاتصال - ستحتاج انك تستخدم الكود مرتين بحكم انك تبي تخفي قطعتين , ولو تبي تخفي ثلاث قطع , راح تستخدم الكود ثلاث مرات .

لكن الي ابغى انبهك عليه , انك لمن تضيف الكود مرة ثانية وثالثة ورابعة , تحتاج انك تغير في قيمة الـ   spoiler1 وتخليهاspoiler2 واذا استخدمت الكود مرة ثالثة تخليها spoiler3 وهكذا ..

مثال :

الأن أبغى اضيف كود في المدونة لإخفاء قطعة ما ,, راح استخدم نفس الكود اللي وضعته في الاعلى وهو :

<button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" style="background: #da3838; border: 1px solid#000000;color:#ffffff" title="Click to show/hide content" type="button">Show/hide</button>

<div id="spoiler1" style="display:none"> 

هنا تضع النص او الصورة او الكود المراد اخفاءه 

</div>

لاحظ توجد اربع قيم للـ  spoiler1 وكلها رقم واحد

طيب لو حبينا نستعمل نفس الكود لاخفاء قطعة ثانية ؟؟

برضه حنستخدم نفس الكود مع تغيير قيمة الـ spoiler1  فقط  , يعني راح يصير   spoiler2 :

<button onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" style="background: #da3838; border: 1px solid#000000;color:#ffffff" title="Click to show/hide content" type="button">Show/hide</button>

<div id="spoiler2" style="display:none"> 

هنا تضع النص او الصورة او الكود المراد اخفاءه 

</div> 

واذا اردنا اضافة قطعة ثالثة راح يكون الكود بالشكل دا:

<button onclick="if(document.getElementById('spoiler3') .style.display=='none') {document.getElementById('spoiler3') .style.display=''}else{document.getElementById('spoiler3') .style.display='none'}" style="background: #da3838; border: 1px solid#000000;color:#ffffff" title="Click to show/hide content" type="button">Show/hide</button>

<div id="spoiler3" style="display:none"> 

هنا تضع النص او الصورة او الكود المراد اخفاءه 

</div> 

ملاحظة اخرى هامة / 

بالنسبة لقيمة الـ spoiler1 نغيرها اذا كنا نستخدم أكثر من  (كود اخفاء)  في الصفحة الواحدة ,,  يعني لمن اخفيت البرودكاست وكذلك نموذج الاتصال , استخدمت (كود الاخفاء)  مرتين في صفحة واحدة ولذلك احتجت تغيير القيمة في الكود الثاني منspoiler1 الى spoiler2 

  لكن اذا استخدمت كود الاخفاء في صفحات مختلفة , مثلا وضعت الكود في صفحة احدى مواضيعك , ثم وضعته كذلك في صفحة اتصل بي , ثم وضعته كذلك في صفحة نبذة عني ,  حينئذ لا يتوجب عليك تغيير القيم ,, لأن كل صفحة مستقلة بذاتها ,, 

الخلل يصير اذا استخدمت كود الاخفاء مرتين في نفس الصفحة او اكثر , حينئذ يتوجب عيك تغيير قيمة spoiler1 , حسب عدد مرات استخدامك له في الصفحة ..

ان شاء الله يكون الشرح واضح وسهل ,  تعمدت اني اشرح التفاصيل واطرح امثلة حتى يكون الاستيعاب أكبر , ولا الموضوع بسيط مايحتاج هذا كله ..

قبل طرح اي سؤال , تأكد من قراءتك للموضوع بتمعن وتركيز وقيامك بالخطوات بشكل صحيح , وانا في الخدمة إذا استصعب عليك شي

 منقول