مولّد أكورديون CSS

ما الذي ينتجه المولّد؟

يستخدم كل عنصر أدوات الإفصاح الأصلية في المتصفح:

<details class="generated-accordion" open>
  <summary>ما الذي يتضمنه؟</summary>
  <div class="generated-accordion__panel">أضف التفاصيل هنا.</div>
</details>

ينسّق CSS الناتج الحد وخلفية العنوان والنص وحلقة التركيز والتباعد والزوايا والمؤشر. ويستخدم خصائص منطقية مثل margin-inline-start، كما يتضمن قواعد للمؤشر في التخطيطات من اليمين إلى اليسار. يوقف استعلام تقليل الحركة انتقال الأيقونة عندما يطلب الزائر حركة أقل.

فتح عدة لوحات أو لوحة واحدة

يعتمد خيار اللوحة الواحدة على سمة name الأصلية لعنصر details. تظل التجربة قابلة للاستخدام في المتصفحات القديمة التي لا تدعم المجموعات الحصرية، لكنها قد تسمح ببقاء أكثر من عنصر مفتوح.

محتوى آمن كنص عادي

تُعامل العناوين واللوحات كنص. تُرمّز الأحرف < و> و& وعلامات الاقتباس والفواصل العليا بصيغة HTML في المقتطف المصدّر، لذلك يظهر الوسم الملصق كنص ولا يتحول إلى ترميز قابل للتنفيذ. إذا احتاجت اللوحة إلى روابط أو قوائم أو تنسيق غني، فأضف الترميز الموثوق بنفسك بعد التصدير.

فحوص إمكانية الوصول قبل النشر

• انتقل بمفتاح Tab إلى كل summary وبدّل حالته بمفتاح Enter أو المسافة.
• افحص لون التركيز فوق خلفية العنوان وخلفية الصفحة.
• اجعل العناوين موجزة وأجب عنها بوضوح في اللوحة.
• اختبر التكبير والشاشات الضيقة والصفحات من اليمين إلى اليسار في التخطيط النهائي.
• لا تُخفِ التعليمات الأساسية للصفحة داخل أكورديون مغلق.