وسم الطي والكشف <details>

وسم details ينشئ صندوقًا قابلًا للطي بعنوان summary — أكورديون أسئلة شائعة كامل بلا سطر جافاسكريبت واحد.

الأكورديون المدمج في HTML: صندوق مغلق يظهر عنوانه فقط (من ابنه الأول summary)، وبنقرة ينكشف محتواه — فتحًا وإغلاقًا وسهم دوران وحفظ حالة، كله مجاني من المتصفح. الأسئلة الشائعة أشهر استخداماته (وأقسام الإدارة في هذا الموقع مليئة به).

خاصية open تجعله مفتوحًا ابتداءً، وحدث toggle في الجافاسكريبت يخبرك بتغير حالته إن احتجت.

الصياغة

<details>
  <summary>السؤال الظاهر</summary>
  <p>الجواب المخفي حتى النقر.</p>
</details>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<details style="border:1px solid #ddd; border-radius:10px; padding:12px">
  <summary style="cursor:pointer; font-weight:bold">هل المنصة مجانية فعلًا؟</summary>
  <p style="margin:8px 0 0">نعم — كل الدروس والاختبارات والشهادات مجانية بالكامل.</p>
</details>
<details open style="border:1px solid #ddd; border-radius:10px; padding:12px; margin-top:8px">
  <summary style="cursor:pointer; font-weight:bold">وهذا مفتوح ابتداءً (open)</summary>
  <p style="margin:8px 0 0">لأن عليه خاصية open.</p>
</details>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
open	يجعله مكشوفًا ابتداءً
name	مجموعة أكورديون حصرية: نفس name = فتح واحد يغلق البقية (المتصفحات الحديثة)

💡 نصائح عملية

cursor:pointer على summary — إشارة النقر البديهية
زاوجه بأسئلة FAQPage في JSON-LD لصفحات الأسئلة الشائعة

⚠️ أخطاء شائعة

نسيان summary فيظهر عنوان «Details» الإنجليزي الافتراضي
إخفاء محتوى جوهري لفهم الصفحة داخله مطويًّا

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs