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

 

فبعد الانتهاء من تحرير التدوينة، نقوم بتحويل صندوق التحرير من وضع "تألبف" إلى وضع "HTML"، و نتوقف عند الجزء الذي نريد إخفاءه، و نضع قبله الكود التالي:

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

و نضيف الكود التالي عند نهاية الجزء الذي نريد إخفاءه:

</div>

و بالتالي، فإن كل ما هو موجود بين الكودين سيتم إخفاءه؛
سنحتاج بعدها إلى طريقة إظهار الجزء المخفي، سنقوم بإضافة الكود التالي: 

</br>
<center>
 <button type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">أكمل القراءة || إظهار المحتوى || إخفاء المحتوى ||</button>
</center>
 </br>

قبل الكود الأول إذا رغبت بالزر أن يكون في الأعلى
أو بعد الكود الثاني إذا رغبت بالزر أن يكون في الأسفل؛
مع تغيير العبارة الحمراء بما يلائمك

بقلم فراس