لديك أسئلة قصيرة وتريد أن يفتح القارئ جوابًا، ثم يغلق الجواب السابق عندما ينتقل إلى السؤال التالي. تستطيع بناء ذلك بعناصر details الأصلية، ويكون summary عنوان الجزء القابل للفتح. لا تحتاج إلى كتابة معالج نقر لهذا السلوك في متصفح يدعم التجميع. [1]
لإنشاء مجموعة details باسم واحد، أعطِ العناصر قيمة name مشتركة؛ فتح أحدها يغلق المفتوح الآخر في المجموعة، ويمكن إغلاقها كلها. [2]
الخلاصة السريعة
- ضع السؤال في summary أولًا، ثم الجواب؛ الاسم المشترك غير الفارغ يربط عناصر المجموعة. [2]
- استخدم اسمًا مختلفًا لكل مجموعة مستقلة؛ اشتراك الاسم لا يشترط تجاور العناصر. [3]
- وجود open يفتح التفاصيل حتى لو كتبت open="false"؛ احذف السمة لتبدأ مغلقة. [1]
- جرّب الوصول إلى السؤال بمفتاح Tab وتشغيله بلوحة المفاتيح، واحتفظ بإشارة تركيز واضحة. [4]
- اختبر name في المتصفحات المستهدفة؛ نجاح الفتح العادي وحده لا يثبت عمل الإغلاق المتبادل. [3]
ابدأ بسؤالين واسم مشترك
ضع السؤال في summary أولًا، ثم الجواب؛ الاسم المشترك غير الفارغ يربط عناصر المجموعة. [2]
انسخ المثال التالي إلى ملف HTML؛ العبارات أمثلة تعليمية وليست معلومات عن جهة محددة. يبدأ السؤال الأول مفتوحًا. افتح الثاني فتختفي إجابة الأول، ثم أغلق الثاني لتبقى المجموعة كلها مغلقة. المقصود واحد مفتوح كحد أقصى، لا إجبار القارئ على إبقاء جواب ظاهرًا. لا تضع open على أكثر من عضو، ولا تعشّق مجموعة بالاسم نفسه داخل أحد أعضائها. [2]
مرّر الشيفرة أفقيًا عند الحاجة.
<details name="visit" open>
<summary>كيف أختار الموعد؟</summary>
<p>اختر يومًا مناسبًا لك.</p>
</details>
<details name="visit">
<summary>هل أحتاج إلى حجز؟</summary>
<p>راجع تعليمات الجهة المنظمة.</p>
</details>افصل المجموعات باختلاف الاسم
استخدم اسمًا مختلفًا لكل مجموعة مستقلة؛ اشتراك الاسم لا يشترط تجاور العناصر. [3]
استخدم visit لأسئلة الزيارة وdelivery للتوصيل؛ تظل المجموعتان مستقلتين. عند نسخ المكوّن، غيّر الاسم إن أردت استقلال النسخة. وإذا احتاج القارئ إلى مقارنة الأجوبة، فأزل التجميع ليتمكن من فتح أكثر من جواب. [3]
لماذا لا تغلق كلمة false التفاصيل؟
وجود open يفتح التفاصيل حتى لو كتبت open="false"؛ احذف السمة لتبدأ مغلقة. [1]
السمة هنا بوليانية: المتصفح ينظر إلى وجودها، لا إلى معنى النص الذي وضعته بين علامتي الاقتباس. لذلك لا تستخدم open="false" لإعداد حالة مغلقة؛ اكتب details من دون open. افصل القرارين أثناء المراجعة: name يحدد علاقة العنصر ببقية المجموعة، وopen يحدد حالته. عندما يبدو أن جوابًا انفتح رغم إعدادك، افحص وجود السمة في العنصر أولًا. [1]
اختبر لوحة المفاتيح قبل تغيير المظهر
جرّب الوصول إلى السؤال بمفتاح Tab وتشغيله بلوحة المفاتيح، واحتفظ بإشارة تركيز واضحة. [4]
اجعل نص summary سؤالًا مفهومًا، وأبقِ علامة الفتح والحد الذي يوضح موضع التركيز أثناء تصميمك. في اختبارنا على Edge، نقل Tab التركيز بين السؤالين، وبدّل Enter وSpace الحالة، وأغلق فتح الثاني الأول. أعد التجربة بعد تنسيق الصفحة؛ نجاح النقر بالفأرة وحده لا يختبر مسار لوحة المفاتيح. وإذا كان جمهورك يستخدم قارئ شاشة، اختبر معه السؤال والحالة المعلنة بدل افتراض أن اختبار المفاتيح يغطيه. [4]
تحقق من التجميع في بيئة الاستخدام
اختبر name في المتصفحات المستهدفة؛ نجاح الفتح العادي وحده لا يثبت عمل الإغلاق المتبادل. [3]
افتح سؤالين متتاليين، ثم سؤالًا من مجموعة أخرى. تأكد من الإغلاق المتبادل واستقلال المجموعات؛ لا تكتفِ بظهور مثلث الإفصاح. [3]
المصادر ومتابعة القراءة
- MDN: تفاصيل العنصر وسماته (يفتح في نافذة جديدة)developer.mozilla.org
- WHATWG: قواعد مجموعة details (يفتح في نافذة جديدة)html.spec.whatwg.org
- Chrome: التجميع الحصري باستخدام name (يفتح في نافذة جديدة)developer.chrome.com
- web.dev: التفاصيل وملخصها التفاعلي (يفتح في نافذة جديدة)web.dev
أُعدّ هذا المقال بصياغة عربية أصلية بالاستناد إلى المصادر أعلاه، وهو مدخل تمهيدي إلى الموضوع. اقرأ منهجية المحتوى وحدوده.