علامة <details> لـ HTML

  • الصفحة السابقة <del>
  • الصفحة التالية <dfn>

التعريف والاستخدام

<details> العلامة تُحدد التفاصيل الأخرى التي يمكن للمستخدم فتحها وإغلاقها عند الحاجة.

<details> العلامة عادة ما تستخدم لإنشاء عنصر تفاعلي يمكن للمستخدم فتحه وإغلاقه. بشكل افتراضي، يكون العنصر مغلقاً. عند فتحه، يتم توسيعه وعرض محتوياته.

يمكن وضع أي نوع من المحتويات داخل <details> في العلامة.

نصيحة:<summary> علامة مع <details> عند استخدامها معًا، يمكن تحديد عنوان مرئي للتفاصيل. عند ضغط المستخدم على العنوان، سيُظهر: <details> المحتوى المحدد.

انظر أيضًا:

دليل HTML DOM:مفهوم التفاصيل

مثال

مثال 1

تحديد التفاصيل التي يمكن للمستخدم فتحها وإغلاقها عند الحاجة:

<details>
  <summary>مركز العالم المستقبلي (مركز إيبيكوت)</summary>
  <p>Epcot هو حديقة موضوعية في منتجع ديزني وولت ديزني العالمي، تحتوي على مناطق جذابة مثيرة، معارض دولية، ألعاب نارية معروفة بالجائزة وحلقات موسمية.</p>
</details>

جربها بنفسك

مثال 2

استخدام CSS لتحديد النمط لـ <details> و <summary>:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>مركز العالم المستقبلي (مركز إيبيكوت)</summary>
  <p>Epcot هو حديقة موضوعية في منتجع ديزني وولت ديزني العالمي، تحتوي على مناطق جذابة مثيرة، معارض دولية، ألعاب نارية معروفة بالجائزة وحلقات موسمية.</p>
</details>
</body>
</html>

جربها بنفسك

الخصائص

الخصائص القيمة الوصف
open open يحدد أن التفاصيل يجب أن تكون مرئية للمستخدم (مفتوحة)

خصائص العالمية

<details> يدعم العنصر أيضًا خصائص العالمية في HTML.

خصائص الحدث

<details> يدعم العنصر أيضًا خصائص الحدث في HTML.

إعدادات CSS افتراضية

سيستخدم معظم المتصفحات القيم التالية كقيم افتراضية للعرض <details> العنصر:

details {
  display: block;
}

دعم المتصفحات

الرقم في الجدول يشير إلى إصدار المتصفح الأول الذي يدعم هذا العنصر بشكل كامل.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0
  • الصفحة السابقة <del>
  • الصفحة التالية <dfn>