ما الذي توفره عناصر details و summary؟

Question

Accepted Answer

`

` و `

` تُنشئ **أداة إفصاح أصلية** — قسماً قابلاً للتوسع والطي — مع **بدون JavaScript**. المتصفح يتعامل مع التبديل، دعم لوحة المفاتيح، والوصول للجميع بالنسبة لك. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** هو التسمية القابلة للنقر عليها (الطفل الأول). - كل شيء بعده هو المحتوى القابل للطي. - النقر على summary يبدل بين الحالات المفتوحة والمغلقة — قابل للوصول أصلياً من لوحة المفاتيح (Enter/Space) ومعلّن بشكل صحيح بواسطة قارئات الشاشة. ## فتح بشكل افتراضي والكشف عن الحالة ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## تصميل المؤشر ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## حالات الاستخدام الفعلي أسئلة شائعة بتنسيق accordion، أقسام "إظهار المزيد"، أشرطة جانبية قابلة للطي، نصوص spoiler، صفوف جداول قابلة للتوسع. قبل هذا العنصر، كل accordion احتاج إلى JavaScript بالإضافة إلى سلك ARIA للوصول — الآن هي علامتان دلالتان فقط. ## لماذا يهم `

`/`

` تعطيك محتوى قابل للطي يمكن الوصول إليه وودود لوحة المفاتيح بدون JS وبدون ARIA يدوي — مثال مثالي لاستخدام المنصة. انتقل إليه للأسئلة الشائعة وأنماط "إظهار المزيد" قبل بناء accordion مخصص.