إيه الفرق؟
الأقسام المطوية أم القائمة المنسدلة
الفارق هو أين يذهب المحتوى الظاهر. الأكورديون يفتح داخل تدفّق الصفحة فيدفع ما تحته لأسفل، والمحتوى يبقى مفتوحاً حتى تغلقه. القائمة المنسدلة تطفو فوق الصفحة في طبقة منفصلة، وتُغلق بمجرّد الاختيار أو الضغط في الخارج.
اسأل نفسك سؤالاً واحداً
هل يجب أن يبقى المحتوى ظاهراً بينما يقرأ المستخدم بقيّة الصفحة؟
التبويبات إطار ثابت الارتفاع؛ القسم يدفع ما تحته.
يعطيك السلوك والوصولية بلا JavaScript، لكن تحريكه متعب.
الأول فقط، أو لا شيء إذا كفت العناوين وحدها.
الأقسام المطوية
Accordionaria-expanded + aria-controlsاستخدمه لما
محتوى يُقرأ ويُقارن ويبقى: تفاصيل منتج، أسئلة شائعة، أقسام إعدادات طويلة.
المدخل الكاملالقائمة المنسدلة
Dropdown / Select<select> / role="listbox"استخدمه لما
اختيار سريع ثم إغلاق: قيمة حقل، أو أمر من قائمة أوامر. لا شيء يستحقّ إزاحة الصفحة من أجله.
المدخل الكاملالخطأ الكلاسيكي
بناء قائمة منسدلة بمنطق الأكورديون داخل تدفّق الصفحة، فيقفز كل ما تحتها عند كل فتح، ويتحرّك الزرّ نفسه من تحت مؤشّر المستخدم.
مقارنات أخرى