المكونات المتقدمة – Collapse و Accordion في Bootstrap

الدرس الخامس عشر: المكونات المتقدمة – Collapse و Accordion في Bootstrap

في تصميم واجهات المستخدم، يمكن أن تكون المساحات المحدودة تحديًا كبيرًا عند تقديم محتوى كبير أو متعدد. لحل هذه المشكلة، يقدم Bootstrap مكونات قوية تساعد في إدارة المحتوى بشكل مرن ومتجاوب. من أبرز هذه المكونات هي المكونات القابلة للطوي (Collapse) و الـ Accordion.

سنتعرف في هذا الدرس على كيفية استخدام هذه المكونات لخلق تجربة مستخدم مرنة، حيث يمكن إخفاء المحتوى وعرضه بناءً على تفاعل المستخدم.

---

1. المكونات القابلة للطوي (Collapse)

مكون Collapse في Bootstrap هو وسيلة لإخفاء وإظهار المحتوى عند النقر على زر أو عنصر معين. هذا يسمح لك بتوفير مساحة على الصفحة وتحسين تجربة المستخدم، خاصة في حالة وجود محتوى طويل يمكن أن يؤثر على تصميم الصفحة.

كيفية إضافة المكون القابل للطوي باستخدام .collapse:

لاستخدام Collapse، عليك إضافة الفئة .collapse إلى المحتوى الذي ترغب في جعله قابلاً للطوي. كما يمكنك ربط الزر أو الرابط لفتح أو إغلاق المحتوى باستخدام الفئة data-bs-toggle="collapse" و data-bs-target.

إليك مثال بسيط على كيفية استخدام Collapse:

<!-- الزر الذي يفتح أو يغلق المكون القابل للطوي -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  اضغط هنا لإظهار المحتوى
</button>

<!-- المحتوى القابل للطوي -->
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    هذا هو المحتوى القابل للطوي. يمكنك إضافة نصوص أو صور أو حتى عناصر أخرى هنا.
  </div>
</div>

شرح الكود:

• data-bs-toggle="collapse": يحدد أن الزر يستخدم وظيفة Collapse.
• data-bs-target="#collapseExample": يشير إلى العنصر الذي سيتم تطبيق عليه خاصية Collapse.
• aria-expanded="false": حالة العنصر عند تحميل الصفحة (هل هو مفتوح أو مغلق).
• aria-controls="collapseExample": يربط الزر بالعنصر الذي يتحكم في ظهوره واختفائه.

إضافة تأثيرات الانهيار والفتح (Transitions):

يمكنك تخصيص الانتقالات لتجعل عملية الطي والانفتاح أكثر سلاسة. Bootstrap يوفر انتقالات افتراضية عند فتح أو غلق المكون القابل للطوي، مما يجعل التفاعل أكثر ديناميكية.

---

2. الـ Accordion في Bootstrap

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

كيفية إنشاء Accordion باستخدام .accordion:

لنقم بإنشاء Accordion بسيط يحتوي على ثلاثة أقسام يمكن فتحها أو إغلاقها بشكل منفصل. سنستخدم الفئات الخاصة بـ Collapse مع إضافة بعض التنسيقات الخاصة بالـ Accordion:

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        القسم الأول
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        هذا هو المحتوى للقسم الأول. يمكن أن يحتوي على نصوص أو أي عناصر أخرى.
      </div>
    </div>
  </div>
  
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        القسم الثاني
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        هذا هو المحتوى للقسم الثاني. يمكن إضافة نص أو روابط داخل هذا القسم.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        القسم الثالث
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        هذا هو المحتوى للقسم الثالث. يمكن إضافة أي محتوى تود عرضه في هذا القسم.
      </div>
    </div>
  </div>
</div>

شرح الكود:

• .accordion: الفئة التي تحتوي على كل الأجزاء التي تشكل الـ Accordion.
• .accordion-item: الفئة التي تحتوي على كل قسم داخل الـ Accordion.
• .accordion-header: الفئة التي تحتوي على عنوان القسم.
• .accordion-button: الزر الذي يتم النقر عليه لفتح أو غلق القسم.
• .accordion-body: المحتوى الذي سيتم فتحه أو غلقه عند التفاعل مع الزر.

التخصيص باستخدام data-bs-parent:

في المثال السابق، نستخدم خاصية data-bs-parent="#accordionExample" لتحديد أن كل Accordion سيؤثر على باقي الأجزاء داخل الـ Accordion. هذه الخاصية تضمن أنه عند فتح قسم معين، سيتم إغلاق باقي الأقسام تلقائيًا.

---

3. تخصيص المكونات القابلة للطوي والـ Accordion

• فتح أو غلق الـ Accordion تلقائيًا: يمكنك تخصيص الـ Accordion لفتح قسم معين تلقائيًا عند تحميل الصفحة باستخدام الفئة show في القسم الذي ترغب في فتحه.
• إضافة تأثيرات عند الفتح والإغلاق: يمكنك إضافة تأثيرات خاصة مثل التلاشي أو التحريك باستخدام إضافات JavaScript أو CSS.

---

4. الخاتمة

يعد كل من Collapse و Accordion من المكونات المتقدمة في Bootstrap التي تتيح لك تحسين تجربة المستخدم عبر تقديم محتوى مرن وقابل للتفاعل. باستخدام هذه المكونات، يمكنك تنظيم المعلومات بشكل فعّال، مما يسهل على المستخدمين الوصول إلى المحتوى الذي يحتاجونه دون الإضرار بتصميم الصفحة.

• Collapse: مفيد لإخفاء وإظهار المحتوى بشكل فردي.
• Accordion: مثالي عند الحاجة لعرض عدة أقسام يمكن فتحها وإغلاقها، مع ضمان أنه لا يتم فتح أكثر من قسم واحد في نفس الوقت.

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