HTML Tutorial

عنصر <details>

الاستخدام:

تُستخدم العلامة <details> لإنشاء قسم قابل للتوسيع والطي يحافظ على محتواه مخفيًا عندما لا يكون مستخدمًا.

الصفات:

  • open: تحدد ما إذا كان القسم سيكون مفتوحًا أو مغلقًا افتراضيًا.
  • summary: توضح الملخص الذي سيظهر في رأس القسم.

أمثلة:

<details>
  <summary>مزيد من التفاصيل</summary>
  <p>هذا هو المحتوى الإضافي.</p>
</details>

استكشاف علامة <details>:

<details open>
  <summary><strong>تفاصيل المنتج</strong></summary>
  <ul>
    <li>الاسم: حذاء الجري</li>
    <li>السعر: 100 دولار</li>
    <li>اللون: أسود</li>
  </ul>
</details>

نصائح إضافية للوصول:

  • استخدم نصوص وصفية للسمة "summary".
  • قدم بديل نصي للمحتوى المخفي.
  • تأكد من أن المحتوى المخفي يمكن الوصول إليه من خلال لوحة المفاتيح.