انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: القوائم المطوية Accordion في بوتستراب 5

Accordion Markup Hierarchy الهيكل القياسي لعناصر الأكورديون

ابنِ قوائم الأسئلة الشائعة ولوحات التصفية بمكوّن الأكورديون الأصيل في بوتستراب 5، وأتقن هيكله القياسي والفتح الحصري بسمة data-bs-parent ونمط البقاء مفتوحاً والأكورديون المدمج وإتاحة العربية.
3 صفوف تعليمية
بوتستراب 5
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يتكوّن كل قسم داخل الحاوية .accordion من عنصر .accordion-item يضم شقيقين أساسيين: عنوان دلالي <h2 class="accordion-header"> بداخله زر .accordion-button، وتحته حاوية الانطواء .accordion-collapse.collapse التي تغلف المحتوى الداخلي .accordion-body.

انتبه لقاعدة ذهبية يغفل عنها الكثيرون: أي زر لقسم مغلق افتراضياً (أي لا تحمل لوحته كلاس .show) يجب أن يحمل الكلاس .collapsed مع aria-expanded="false" حتى يظهر لونه الهادئ ويشير سهمه للأسفل منذ اللحظة الأولى.

الصف 2 كود برمجي
HTML 
<div class="accordion" id="faqAcc">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button"
        data-bs-toggle="collapse" data-bs-target="#q1">
        1. Billing Cycle</button>
    </h2>
    <div id="q1" class="accordion-collapse collapse show"
      data-bs-parent="#faqAcc">
      <div class="accordion-body">Monthly renewal.</div>
    </div></div></div>
جرّب بنفسك
الصف 3 ملاحظة هامة

جميع فقرات هذا الدرس (القوائم المطوية Accordion في بوتستراب 5)