الأكورديون (Accordion)
الأكورديون يستخدم لإنشاء قوائم منسدلة عمودية أو لوحات قابلة للطي. يُستخدم بكثرة في صفحات الأسئلة الشائعة (FAQ) لتقليل ازدحام الصفحة بالنصوص.
التوثيق الرسمي1. الأكورديون الأساسي (Basic Accordion)
يتكون من حاوية، وعناصر (Items)، وأزرار ورؤوس محتوى قابلة للطي. سيتم إغلاق العناصر الأخرى تلقائياً عند فتح عنصر جديد.
المعاينة
هذا هو محتوى العنصر الأول. يظهر بشكل افتراضي لأنه يحتوي على كلاس
show. وهو جيد لوضع محتوى الشرح.
هذا هو المحتوى الثاني. لا يظهر إلا عند الضغط على الزر الخاص به. وعندها سيتم طي العنصر الأول تلقائياً.
المحتوى الأخير هنا. يمكن إضافة المزيد من العناصر ببساطة عن طريق نسخ ولصق
accordion-item.
شرح الكود:
id="accordionExample": مُعرّف الحاوية الكلية.accordion-item: كل بلوك أو لوحة داخل الأكورديون تعتبر (Item).accordion-button: الزر الذي يظهر النص وبجواره سهم (يتغير اتجاهه عند الفتح).data-bs-target="#collapseOne": يخبر الزر ما هي اللوحة التي يجب فتحها.data-bs-parent="#accordionExample": هذا السطر مهم جداً. وهو يخبر اللوحة (Collapse) بأن أباها هو هذا الأكورديون. هذا يجعل المتصفح يغلق باقي اللوحات تلقائياً عندما تفتح لوحة جديدة (وظيفة الأكورديون الأساسية).show: الكلاس الذي يجعل اللوحة الأولى مفتوحة كوضع افتراضي.
2. أكورديون بدون حواف (Flush Accordion)
أضف accordion-flush للحاوية لإزالة الحواف الخارجية والخلفيات وإعطاء مظهر متصل مع محتوى الصفحة (Edge-to-edge).
المعاينة
هذا محتوى العنصر. لاحظ أن الحواف اليمنى واليسرى تم إزالتها تماماً ليبدو مسطحاً أكثر.
محتوى إضافي هنا لغرض الشرح.
شرح الكود:
accordion-flush: بمجرد إضافته للحاوية، يقوم بإلغاءborder(الحواف) اليمنى واليسرى للـaccordion-itemوإلغاء الزوايا المنحنية. ممتاز جداً لاستخدامه داخل نافذة (Modal) أو بطاقة (Card) حيث لا تريد تداخل حواف الأكورديون مع حواف العنصر الأب.
3. البقاء مفتوحاً دائماً (Always Open)
إذا كنت تريد أن يسمح للمستخدم بفتح أكثر من عنصر في نفس الوقت (دون أن يغلق الأول تلقائياً)، فقط قم بإزالة كلاس الأب.
المعاينة
هذا العنصر الأول مفتوح. افتح العنصر الثاني وسأظل أنا مفتوحاً أيضاً.
هذا العنصر الثاني. الآن كلا العنصرين مفتوحان معاً!
شرح الكود:
- السر بسيط جداً: قمنا بحذف السطر
data-bs-parent="#accordionExample"من جميع عناصر الـaccordion-collapse. - عند غياب الـ parent، يصبح كل زر يتعامل مع لوحته بشكل مستقل دون التأثير على اللوحات الأخرى، وتتحول وظيفته من (أكورديون) إلى لوحات (Collapse) منفصلة.