Bootstrap: الأكورديون ولوحات الطي

Q: كيف أجعل اللوح الأول من الأكورديون ممدّدًا افتراضيًا دون سلوك الطي التلقائي؟

ببساطة أزِل سمة data-bs-parent . بهذه الطريقة، يعمل كل لوح بشكل مستقل ولا يؤثر على البقية.

Q: هل يمكنني وضع خانات اختيار أو حقول إدخال داخل الأكورديون؟

نعم. يمكنك وضع أي HTML داخل accordion-body ، بما في ذلك عناصر النماذج. احذر من عدم تشغيل تمدد/طي الأكورديون عن طريق الخطأ عند النقر على المدخلات. يمكنك استخدام event.stopPropagation() لمنع فقاعة الأحداث.

آخر تحديث: 2026-08-26

1. مقدمة الدرس

(1) المتطلبات السابقة

الدرس 15: مكونات التنبيه

(2) 🎯 ما ستتعلّمه

استخدام Collapse لتمديد/طي عنصر واحد
استخدام Accordion لسلوك الأكورديون المرتبط
استخدام accordion-flush لإزالة الحدود
استخدام data-bs-parent للتحكم في السلوك المرتبط
تنفيذ لوحات طي مستقلة (وضع الدائم الانفتاح)

(3) المشكلة

يبني Bob صفحة أسئلة شائعة تحتوي على 8 أسئلة متكررة. يريد تنفيذ ذلك باستخدام الأكورديون: عندما ينقر المستخدم على سؤال، يتمدد الجواب، وعند النقر على سؤال آخر يُطوى السابق تلقائيًا، مما يوفر تجربة سلسة ويوفر مساحة الصفحة.

(4) الحل

يُستخدم مكون Collapse لعرض كميات كبيرة من المحتوى في مساحة محدودة. ينقر المستخدم على عنوان لإظهار التفاصيل وينقر مرة أخرى لإخفائها. الأكورديون هو شكل خاص من مكون Collapse: يبقى لوح واحد فقط مفتوحًا في كل مرة.

(5) الفوائد

يسمح استخدام الأكورديون بتنظيم كميات كبيرة من المحتوى في مساحة محدودة، مما يبقي الصفحة نظيفة ويحسّن تجربة التصفح.

2. لوح Collapse مفرد

أبسط مكون Collapse:

HTML

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
    Toggle content
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This content is hidden by default. Click the button to show or hide it.
  </div>
</div>

▶ جرّب الكود

▶ مثال: لوح Collapse أساسي

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collapse Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <p>
      <a class="btn btn-primary" data-bs-toggle="collapse" href="#singleCollapse" role="button">
        Toggle with link
      </a>
      <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#singleCollapse">
        Toggle with button
      </button>
    </p>
    <div class="collapse" id="singleCollapse">
      <div class="card card-body">
        This content can be toggled using either the link or the button.
      </div>
    </div>

    <hr>

    <p>
      <button class="btn btn-success" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
        Toggle both
      </button>
    </p>
    <div class="row">
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapse1">
          <div class="card card-body">First collapsible panel.</div>
        </div>
      </div>
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapse2">
          <div class="card card-body">Second collapsible panel.</div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ جرّب الكود

(1) السمات الأساسية لـ Collapse

السمة/الفئة	الوصف
`data-bs-toggle="collapse"`	يُعرّف المُشغّل
`data-bs-target="#id"`	يحدد العنصر المراد طيه
`class="collapse"`	مخفي افتراضيًا
`class="collapse show"`	ظاهر افتراضيًا (حالة التمدد)
`data-bs-parent="#accordion"`	تحكم مرتبط (يُستخدم للأكورديون)

3. الأكورديون

الأكورديون هو مجموعة مرتبطة من عدة لوحات collapse، بحيث يمكن تمدد لوح واحد فقط في كل مرة.

HTML

<div class="accordion" id="faqAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq1">
        How do I install Bootstrap?
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse show"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Add the CDN link to your HTML head.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq2">
        Does Bootstrap need jQuery?
      </button>
    </h2>
    <div id="faq2" class="accordion-collapse collapse"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        No, Bootstrap 5 uses vanilla JavaScript.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq3">
        What is the grid system?
      </button>
    </h2>
    <div id="faq3" class="accordion-collapse collapse"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Bootstrap uses a 12-column flexbox grid system.
      </div>
    </div>
  </div>
</div>

▶ جرّب الكود

(1) بنية الأكورديون

العنصر	الفئة	الوصف
الحاوي	`accordion`	يُعرّف مجموعة الأكورديون
العنصر	`accordion-item`	لوح collapse مفرد
الترويسة	`accordion-header`	حاوي صف الترويسة
المُشغّل	`accordion-button`	زر العنوان القابل للنقر
منطقة المحتوى	`accordion-collapse collapse`	المحتوى القابل للطي
متن المحتوى	`accordion-body`	النص الفعلي المعروض

(2) الآلية الأساسية

HTML

data-bs-parent="#faqAccordion"  // مرتبط (لوح واحد مفتوح في كل مرة)
class="accordion-collapse collapse show"  // ممدّد افتراضيًا
class="accordion-button collapsed"  // حالة الطي

▶ جرّب الكود

4. تنويعات الأكورديون

HTML

<!-- Flush (بدون حد خارجي) -->
<div class="accordion accordion-flush">
  <div class="accordion-item">...</div>
</div>

<!-- وضع الدائم الانفتاح (إزالة data-bs-parent) -->
<div class="accordion" id="multiOpen">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#panel1">
        Panel 1
      </button>
    </h2>
    <!-- بدون data-bs-parent — مستقل -->
    <div id="panel1" class="accordion-collapse collapse show">
      <div class="accordion-body">This panel stays open when Panel 2 is opened.</div>
    </div>
  </div>
</div>

▶ جرّب الكود

5. أمثلة إضافية للوحات Collapse

▶ مثال: أكورديون أسئلة شائعة (بدون حدود)

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FAQ Accordion</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="accordion accordion-flush" id="faqAccordion">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
            What is Bootstrap?
          </button>
        </h2>
        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Bootstrap is a free front-end framework for building responsive websites with HTML, CSS, and JavaScript.</div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
            Do I need to know JavaScript?
          </button>
        </h2>
        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Basic Bootstrap components work without JS. Interactive components like modals and carousels need Bootstrap JS.</div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
            Is Bootstrap free?
          </button>
        </h2>
        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Yes, Bootstrap is completely free and open-source under the MIT license.</div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
            What is the grid system?
          </button>
        </h2>
        <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Bootstrap's grid uses 12 columns with breakpoints for responsive layouts. Classes like col-md-6 create columns that adjust at different screen sizes.</div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ جرّب الكود

▶ مثال: وضع الدائم الانفتاح (لوحات مستقلة)

HTML

<div class="accordion" id="independentAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelA">
        Skills & Expertise
      </button>
    </h2>
    <div id="panelA" class="accordion-collapse collapse show">
      <div class="accordion-body">HTML, CSS, JavaScript, Bootstrap, React</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelB">
        Work Experience
      </button>
    </h2>
    <div id="panelB" class="accordion-collapse collapse show">
      <div class="accordion-body">Senior Developer at TechCorp (2020-present), Frontend Developer at WebStudio (2018-2020)</div>
    </div>
  </div>
</div>

▶ جرّب الكود

▶ مثال: مكونات Collapse مستقلة

HTML

<div class="container py-4">
  <div class="d-flex gap-2 mb-3">
    <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo1">
      Toggle First
    </button>
    <button class="btn btn-outline-success" data-bs-toggle="collapse" data-bs-target="#demo2">
      Toggle Second
    </button>
    <button class="btn btn-outline-danger" data-bs-toggle="collapse" data-bs-target=".multi-demo">
      Toggle All
    </button>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="collapse multi-demo show" id="demo1">
        <div class="card card-body">
          First panel — visible by default.
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="collapse multi-demo" id="demo2">
        <div class="card card-body">
          Second panel — initially hidden.
        </div>
      </div>
    </div>
  </div>
</div>

▶ جرّب الكود

▶ مثال: لوح Collapse داخل بطاقة

HTML

<div class="card" style="max-width: 500px;">
  <div class="card-header bg-primary text-white">
    <h5 class="mb-0">Order Summary</h5>
  </div>
  <div class="card-body">
    <p class="card-text">Your order contains 3 items.</p>
    <p>
      <a class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" href="#orderDetails">
        View Details
      </a>
    </p>
    <div class="collapse" id="orderDetails">
      <div class="border rounded p-3 bg-light">
        <div class="d-flex justify-content-between mb-2">
          <span>Wireless Mouse</span><span class="text-muted">$29.99</span>
        </div>
        <div class="d-flex justify-content-between mb-2">
          <span>USB-C Hub</span><span class="text-muted">$39.99</span>
        </div>
        <div class="d-flex justify-content-between">
          <span>Mouse Pad</span><span class="text-muted">$12.99</span>
        </div>
        <hr>
        <div class="d-flex justify-content-between fw-bold">
          <span>Total</span><span>$82.97</span>
        </div>
      </div>
    </div>
  </div>
</div>

▶ جرّب الكود

(1) كيف يعمل Collapse/Accordion

flowchart TD
    A[Trigger<br/>data-bs-toggle=collapse] --> B[data-bs-target=#id]
    B --> C[Target Element<br/>class=collapse]
    C --> D{Initial State}
    D -->|No show| E[Hidden by Default]
    D -->|Has show| F[Expanded by Default]
    C --> G{Has data-bs-parent?}
    G -->|Yes| H[Linked Mode<br/>Only one open at a time]
    G -->|No| I[Independent Mode<br/>Toggle individually]
    H --> J[Accordion]
    I --> K[Regular Collapse]

فئة Collapse	التأثير	الوصف
`collapse`	مخفي افتراضيًا	غير مرئي عند تحميل الصفحة
`collapse show`	ممدّد افتراضيًا	مرئي عند تحميل الصفحة
`collapsing`	في حالة انتقالية	يُضاف تلقائيًا أثناء الحركة
`accordion-collapse`	خاص بالأكورديون	يُستخدم داخل أكورديون

سمة data-*	القيمة	الغرض
`data-bs-toggle`	`collapse`	يُعرّف مُشغّل collapse
`data-bs-target`	`#id` / `.class`	يحدد العنصر المُتحكَّم به
`data-bs-parent`	`#accordionId`	قيد مرتبط (أكورديون)
`href`	`#id`	مُشغّل من نوع رابط

تنويع الأكورديون	الفئة	الميزة	السيناريو
أساسي	`accordion`	حدود قياسية	استخدام عام
بدون حدود	`accordion-flush`	بدون حد خارجي/استدارة	الأسئلة الشائعة، الشريط الجانبي
دائم الانفتاح	إزالة `data-bs-parent`	عدة لوحات مفتوحة simultaneً	لوحات الإعدادات
متداخل في بطاقة	وضعه داخل `card-body`	تخطيط مدمج	تفاصيل الطلب

❓ أسئلة شائعة

س ما الفرق بين الأكورديون وCollapse؟

ج Collapse هو المكوّن الأساسي — يتحكم في تمدد/طي عنصر واحد. الأكورديون هو تطبيق مركب من Collapse — تُربط عدة لوحات عبر data-bs-parent، مما يسمح بفتح لوح واحد فقط في كل مرة.

س أيقونة السهم لا تدور عند النقر على عنوان الأكورديون. لماذا؟

ج السبب الأرجح هو عدم تحميل Bootstrap JS بشكل صحيح. تأكد من تضمين bootstrap.bundle.min.js. تحقق من وحدة تحكم المتصفح لأي أخطاء JS.

س كيف أجعل اللوح الأول من الأكورديون ممدّدًا افتراضيًا دون سلوك الطي التلقائي؟

ج ببساطة أزِل سمة data-bs-parent. بهذه الطريقة، يعمل كل لوح بشكل مستقل ولا يؤثر على البقية.

س هل يمكنني وضع خانات اختيار أو حقول إدخال داخل الأكورديون؟

ج نعم. يمكنك وضع أي HTML داخل accordion-body، بما في ذلك عناصر النماذج. احذر من عدم تشغيل تمدد/طي الأكورديون عن طريق الخطأ عند النقر على المدخلات. يمكنك استخدام event.stopPropagation() لمنع فقاعة الأحداث.

س هل يدعم الأكورديون التنقل بلوحة المفاتيح؟

ج نعم. يُطبّق أكورديون Bootstrap تفاعل لوحة المفاتيح: Tab يُبدّل التركيز بين اللوحات، Enter/Space يمدّد اللوح الحالي، والضغط على Enter/Space مرة أخرى على لوح ممدّد يطويه.

📖 ملخص

Collapse: data-bs-toggle="collapse" + data-bs-target="#id" للتحكم في عنصر واحد
Accordion: حاوي accordion + accordion-item + accordion-button + accordion-collapse
data-bs-parent يُفعّل السلوك المرتبط؛ أزِله للوحات مستقلة
accordion-flush يزيل الحدود

📝 تمارين

⭐ أنشئ أكورديون أسئلة شائعة: 5 أسئلة على الأقل، الأول ممدّد افتراضيًا، والباقي مطوي، باستخدام نمط accordion-flush بدون حدود.
⭐⭐ نفّذ إجابات الواجب باستخدام أكورديون — كل سؤال كلوح، انقر لإظهار الإجابة.
⭐⭐⭐ أنشئ أكورديون تنقل شريطي: يشمل Dashboard (بدون عناصر فرعية)، Products (3 عناصر فرعية)، Orders (عنصران فرعيان)، Settings (4 عناصر فرعية).

الدرس السابق: مكونات التنبيه · الدرس التالي: Bootstrap Icons

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن