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