ثلاثة عناصر تفاعلية HTML نقية — بدون JavaScript!
<details>: • قسم قابل للطي والفتح • الصفة open: يجعله مفتوحاً بالتقصير • مثالي لـ FAQ، accordion، معلومات إضافية
<summary>: • العنوان المرئي دائماً لـ details • يجب أن يكون أول عنصر داخل details • عند الضغط عليه يفتح/يغلق details • مثالي للـ FAQ
<dialog>: • نافذة حوارية (Modal) نقية HTML • لا تظهر افتراضياً — تحتاج JavaScript لفتحها • open صفة لإظهارها • .showModal() للعرض كـ modal (مع خلفية معتمة) • .show() للعرض بدون modal • ESC يغلقها تلقائياً (showModal فقط)',
| 1 | <!-- details + summary: قابل للطي --> |
| 2 | <details> |
| 3 | <summary>ما هو HTML؟</summary> |
| 4 | <p>HTML هي لغة ترميز النص التشعبي المستخدمة لبناء صفحات الويب.</p> |
| 5 | </details> |
| 6 | |
| 7 | <details open> |
| 8 | <summary>هذا القسم مفتوح بالتقصير</summary> |
| 9 | <p>محتوى القسم المفتوح مسبقاً.</p> |
| 10 | </details> |
| 11 | |
| 12 | <!-- dialog: نافذة حوارية --> |
| 13 | <dialog id="confirm-dialog"> |
| 14 | <h2>تأكيد الحذف</h2> |
| 15 | <p>هل أنت متأكد من حذف هذا العنصر؟</p> |
| 16 | <form method="dialog"> |
| 17 | <button type="submit" value="cancel">إلغاء</button> |
| 18 | <button type="submit" value="confirm">تأكيد الحذف</button> |
| 19 | </form> |
| 20 | </dialog> |
| 21 | |
| 22 | <button onclick="document.getElementById('confirm-dialog').showModal()"> |
| 23 | حذف العنصر |
| 24 | </button> |
مثال 1: FAQ باستخدام details
| 1 | <section class="faq"> |
| 2 | <h2>الأسئلة الشائعة</h2> |
| 3 | |
| 4 | <details> |
| 5 | <summary>هل الكورسات مجانية؟</summary> |
| 6 | <p> |
| 7 | نعم! لدينا كورسات مجانية وكورسات مدفوعة. |
| 8 | يمكنك البدء مجاناً في أي وقت. |
| 9 | </p> |
| 10 | </details> |
| 11 | |
| 12 | <details> |
| 13 | <summary>كيف أحصل على شهادة؟</summary> |
| 14 | <p> |
| 15 | أكمل الكورس بنسبة 100% واجتز الاختبار النهائي |
| 16 | بدرجة لا تقل عن 70% للحصول على الشهادة. |
| 17 | </p> |
| 18 | </details> |
| 19 | |
| 20 | <details> |
| 21 | <summary>هل يمكنني الوصول للكورسات على الموبايل؟</summary> |
| 22 | <p> |
| 23 | نعم، المنصة متجاوبة تماماً وتعمل على كل الأجهزة. |
| 24 | </p> |
| 25 | </details> |
| 26 | </section> |
| 27 | |
| 28 | <!-- نافذة تسجيل الدخول --> |
| 29 | <dialog id="login-modal" aria-labelledby="login-title"> |
| 30 | <h2 id="login-title">تسجيل الدخول</h2> |
| 31 | <form method="dialog"> |
| 32 | <input type="email" placeholder="البريد الإلكتروني"> |
| 33 | <input type="password" placeholder="كلمة المرور"> |
| 34 | <button type="submit">دخول</button> |
| 35 | <button type="button" |
| 36 | onclick="document.getElementById('login-modal').close()"> |
| 37 | إغلاق |
| 38 | </button> |
| 39 | </form> |
| 40 | </dialog> |