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

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

لنشاهد مثال حي حتى يتضح لك الأمر:

مثال 1 /


مثال 2 /


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

1 توجه  الى لوحة التحكم / تنسيق / إضافة أداة ثم اخترHTML/JAVASCRIPT
أو في حال أردتها في صفحة التدوينة تذهب إلى مشاركة جديدة وتنتقل إلى وضع تحرير HTML 

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 ;color:#ffffff" title="Click to show/hide content" type="button">Show/hide</button>

<div id="spoiler1" style="display:none">
هنا تضع النص او الصورة او الكود المراد اخفاءه
</div>
ضبط خصائص الكود:
  • لتغيير لون خلفية الزر, إستبدل الكود  #da3838 بكود اللون اذي تريده.
  • لتغيير لون نص الزر,  إستبدل الكود #ffffff.
ملاحظة هامة جدا !!
إذا اردت إخفاء اكثر من قطعة في نفس الصفحة - مثل الموجود في هذه الصفحة أخفيت البرودكاست و نموذج الاتصال - ستحتاج انك تستخدم الكود مرتين بما أنك تريد إخفاء قطعتين , ولو تريد إخفاء ثلاث قطع , ستستخدم الكود ثلاث مرات .

ولكن:
إذا أردت إضافة الكود مرة ثانية وثالثة ورابعة , يجب تغيير  قيمة الـ   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: ; border: 1px solid ;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: ; border: 1px solid ;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: ; border: 1px solid ;color:#ffffff" title="Click to show/hide content" type="button">Show/hide</button>

<div id="spoiler3" style="display:none">
هنا تضع النص او الصورة او الكود المراد اخفاءه
</div>

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

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

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

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