العنصر <details>
< HTML
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
يُستخدم العنصر <details> لعرض معلومات إضافية للمستخدم يمكنه إظهارها وإخفاؤها متى شاء. يمكن وضع أيّ نوع من المحتوى ضمن العنصر <details>، وتكون محتوياته مخفيةً افتراضيةً (إلا إذا ضُبِطَت الخاصية open).
مثال عن استخدام العنصر <details> مع العنصر <summary>، لاحظ أنَّ الخاصية open ستجعل المتصفح يُظهِر المحتوى عند تحميل الصفحة:
<details>
<summary>أحد التفاصيل</summary>
<p>معلومات إضافية حول التفصيل الأول</p>
</details>
<details open>
<summary>تفصيلٌ آخر</summary>
<p>معلومات إضافية حول التفصيل الثاني</p>
</details>
بطاقة العنصر
| تصنيفات المحتوى | عنصر تنظيمي وعنصر تقسيمي وعنصر تفاعلي. |
|---|---|
| المحتوى المسموح | عنصر <summary> وحيد يليه محتوى عادي.
|
| الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
| العناصر الأب | أي عنصر يقبل المحتوى التنظيمي. |
| واجهة DOM | HTMLDetailsElement
|
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| 12 | 49 | قيد التطوير | 6 | 15 |
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
open
قيمة منطقية تُشير إذا كانت التفاصيل ستظهر للمستخدم بعد تحميل الصفحة مباشرةً، القيمة الافتراضية هي false أي أنَّ المحتوى يكون مخفيًا بدايةً.
التنسيق الافتراضي
تعرض أغلبية المتصفحات العنصر <details> مع ضبط الخاصية display إلى block:
details {
display: block;
}
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML 5.1.