<details>: عنصر DETAILS
آخر تحديث: 2026-10-13
<details>عنصر DETAILS
يمثل أداة كشف قابلة للفتح/الإغلاق بالنقر على summary الخاص بها.
| الفئة | دلالي |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </details> وسم |
| الحالة | قياسي |
📝 البنية
<details>محتوى قابل للطي</details>▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <details> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： مطوي افتراضيًا؛ أضف الخاصية open للتوسيع المبدئي. يعمل دون JavaScript.
❓ الأسئلة الشائعة
Qماذا يحدث إذا خلت details من summary؟
Aيستخدم المتصفح نصًا افتراضيًا (مثل «معلومات إضافية» في Chrome) كعنصر التحكم بالتوسيع. ولتخصيص نص الزر يجب تقديم
<summary> كأول عنصر ابن — وهو أفضل للوصولية أيضًا.Qكيف تجعل details موسعًا افتراضيًا؟
Aأضف السمة المنطقية
open إلى <details>: <details open> — تفتح الصفحة وهو موسع ويبقى بإمكان المستخدم طيه بالنقر. وبرمجيًا يمكن التحكم بقراءة وكتابة details.open (قيمة منطقية) عبر JS.Qهل يصنع details أكورديون بحصرية فتح؟
Aعناصر
<details> الأصلية مستقلة ولا تتحاصر. وقد أدخلت المواصفات المحدثة سمة name: فالوسوم ذات الاسم نفسه <details name='faq'> تشكل مجموعة حصرية لا يُفتح منها إلا واحد في اللحظة الواحدة؛ والمتصفحات القديمة تحتاج JS كحل بديل.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
