كيف أجعل عنصر details مفتوحًا تلقائيًا في HTML؟

سهلقراءة دقيقةآخر تحديث 1 أكتوبر 2026

تطوير الويب

الإجابة

أضف الخاصية open:

<details open>
  <summary>Shipping info</summary>
  <p>Delivery takes 3 to 5 days.</p>
</details>

بهذا يظهر المحتوى مفتوحًا عند تحميل الصفحة، ويمكن للزائر إغلاقه بالنقر على <summary>.

من JavaScript

const box = document.querySelector('details');
box.open = true;   // open it
box.open = false;  // close it

لا توجد خصائص اسمها close أو expand أو collapse لهذا العنصر؛ غياب open يعني أنه مغلق.

اختبر فهمك

ما الخاصية التي تجعل العنصر details مفتوحًا تلقائيًا عند تحميل الصفحة؟