إنشاء القوائم القابلة للطي والتوسيع | العناصر التفاعلية في لغة HTML

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

ينشئ عنصر <details> أداة إفصاح تفاعلية يمكن للمستخدمين فتحها وإغلاقها بسهولة. يجب أن يكون الابن المباشر الأول داخل هذا العنصر هو وسم الملخص <summary> الذي يعمل كعنوان بارز قابل للنقر للتحكم في ظهور أو إخفاء باقي المحتوى.

الصف 2 كود برمجي

HTML

<!-- Native collapsible FAQ section -->
<details>
  <summary>What is HTML5 Living Standard?</summary>
  <p>Maintained specification for modern HTML.</p>
</details>

جرّب بنفسك

الصف 3 صورة توضيحية

حالات عنصر القوائم القابلة للطي details في الوضعين المغلق والمفتوح

الصف 4 شرح توضيحي

يعرض المتصفح افتراضياً مؤشراً سهمياً صغيراً بجوار نص الملخص للإشارة لحالة الطي. يمكن تنسيق هذا السهم وتغيير مظهره بسهولة عبر محدد CSS الخاص بالعلامات ::marker، كما يتيح محدد الخاصية details[open] تطبيق تأثيرات حركية أنيقة عند فتح القائمة.

الصف 5 ملاحظة هامة

Collapsible Sections with details إنشاء القوائم القابلة للطي والتوسيع

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (العناصر التفاعلية في لغة HTML)