كيف أجعل عنصر 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 مفتوحًا تلقائيًا عند تحميل الصفحة؟