إطار Bootstrap 5

الطي والإظهار (Collapse)

13 دقيقة الدرس 34 من 40

مكون الطي والإظهار في Bootstrap 5

يسمح لك مكون الطي والإظهار (Collapse) بتبديل رؤية المحتوى. إنه مفيد لإنشاء الأكورديون والأقسام القابلة للتوسيع وأنماط الكشف التدريجي. يمكن أن يظهر أو يخفي المحتوى بحركات سلسة.

الوظيفة الأساسية للطي

أبسط نمط للطي يتضمن عنصر تفعيل وعنصر هدف.

<!-- زر التفعيل -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
    تبديل المحتوى
</button>

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

كيف يعمل: خاصية data-bs-toggle="collapse" تفعل الطي، و data-bs-target تشير إلى معرف العنصر المراد طيه.

إظهار المحتوى افتراضيًا

أضف فئة show لعرض المحتوى المطوي مبدئيًا.

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseShown">
    تبديل المحتوى
</button>

<!-- معروض افتراضيًا -->
<div class="collapse show" id="collapseShown">
    <div class="card card-body">
        هذا المحتوى مرئي افتراضيًا ويمكن طيه.
    </div>
</div>
        

أهداف طي متعددة

يمكن لزر واحد التحكم في عناصر طي متعددة، ويمكن لأزرار متعددة التحكم في عنصر واحد.

<!-- زر واحد، أهداف متعددة -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
    تبديل كليهما
</button>

<div class="collapse multi-collapse" id="collapseFirst">
    <div class="card card-body">
        العنصر القابل للطي الأول
    </div>
</div>

<div class="collapse multi-collapse" id="collapseSecond">
    <div class="card card-body">
        العنصر القابل للطي الثاني
    </div>
</div>

<!-- أزرار متعددة، هدف واحد -->
<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#sharedCollapse">
    تبديل من الزر 1
</button>

<button class="btn btn-warning" type="button" data-bs-toggle="collapse" data-bs-target="#sharedCollapse">
    تبديل من الزر 2
</button>

<div class="collapse" id="sharedCollapse">
    <div class="card card-body">
        يمكن تبديل هذا المحتوى بواسطة أي من الزرين.
    </div>
</div>
        

الطي بنمط الأكورديون

يسمح الأكورديون بفتح عنصر طي واحد فقط في كل مرة داخل حاوية أب.

<div class="accordion" id="accordionExample">
    <!-- عنصر أكورديون 1 -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                عنصر الأكورديون #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>هذا محتوى العنصر الأول.</strong> يظهر افتراضيًا مع فئة show.
            </div>
        </div>
    </div>

    <!-- عنصر أكورديون 2 -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                عنصر الأكورديون #2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                هذا محتوى العنصر الثاني. فتح هذا سيغلق العنصر الأول.
            </div>
        </div>
    </div>

    <!-- عنصر أكورديون 3 -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                عنصر الأكورديون #3
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                هذا محتوى العنصر الثالث. يتبع نفس النمط مثل الآخرين.
            </div>
        </div>
    </div>
</div>
        

ميزة رئيسية: خاصية data-bs-parent تضمن فتح عنصر أكورديون واحد فقط في كل مرة. احذفها للسماح بفتح عناصر متعددة في نفس الوقت.

نمط الأكورديون المسطح

أنشئ أكورديون بدون حدود وزوايا دائرية للتكامل السلس.

<div class="accordion accordion-flush" id="accordionFlush">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne">
                عنصر أكورديون مسطح #1
            </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
            <div class="accordion-body">
                هذا الأكورديون ليس له حدود أو ألوان خلفية، مثالي للتخطيطات السلسة.
            </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="#flush-collapseTwo">
                عنصر أكورديون مسطح #2
            </button>
        </h2>
        <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
            <div class="accordion-body">
                النمط المسطح يزيل الحدود والزوايا الدائرية.
            </div>
        </div>
    </div>
</div>
        

أكورديون مفتوح دائمًا

اسمح بفتح عناصر أكورديون متعددة في نفس الوقت بإزالة data-bs-parent.

<div class="accordion" id="accordionAlwaysOpen">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#openOne">
                عنصر #1
            </button>
        </h2>
        <div id="openOne" class="accordion-collapse collapse show">
            <div class="accordion-body">
                يمكن أن يبقى هذا العنصر مفتوحًا أثناء فتح عناصر أخرى.
            </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="#openTwo">
                عنصر #2
            </button>
        </h2>
        <div id="openTwo" class="accordion-collapse collapse">
            <div class="accordion-body">
                يمكن أن تكون عناصر متعددة مفتوحة في نفس الوقت.
            </div>
        </div>
    </div>
</div>
        

الطي الأفقي

اطوِ المحتوى أفقيًا بدلاً من عموديًا باستخدام .collapse-horizontal.

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHorizontal">
    تبديل الطي الأفقي
</button>

<div style="min-height: 120px;">
    <div class="collapse collapse-horizontal" id="collapseHorizontal">
        <div class="card card-body" style="width: 300px;">
            هذا المحتوى يطوى أفقيًا من اليسار إلى اليمين.
        </div>
    </div>
</div>
        

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

الطي مع الروابط

استخدم الروابط بدلاً من الأزرار لتفعيل الطي.

<!-- رابط التفعيل -->
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseLink" role="button">
    رابط مع href
</a>

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLink">
    زر مع data-bs-target
</button>

<div class="collapse" id="collapseLink">
    <div class="card card-body">
        يمكن تبديل هذا بواسطة الرابط أو الزر.
    </div>
</div>
        

واجهة جافا سكريبت للطي

تحكم في الطي برمجيًا باستخدام جافا سكريبت.

<script>
// الحصول على عنصر الطي
const collapseEl = document.getElementById('myCollapse');

// إنشاء نسخة من الطي مع خيارات
const collapse = new bootstrap.Collapse(collapseEl, {
    toggle: false,    // لا تبديل عند التهيئة
    parent: null      // محدد الأب لسلوك الأكورديون
});

// إظهار الطي
collapse.show();

// إخفاء الطي
collapse.hide();

// تبديل الطي
collapse.toggle();

// التخلص من نسخة الطي
collapse.dispose();

// طريقة ثابتة - الحصول على نسخة أو إنشاءها
const collapseInstance = bootstrap.Collapse.getOrCreateInstance(collapseEl);

// مستمعي الأحداث
collapseEl.addEventListener('show.bs.collapse', function (event) {
    console.log('الطي على وشك الظهور');
});

collapseEl.addEventListener('shown.bs.collapse', function (event) {
    console.log('الطي ظهر بالكامل');
});

collapseEl.addEventListener('hide.bs.collapse', function (event) {
    console.log('الطي على وشك الاختفاء');
});

collapseEl.addEventListener('hidden.bs.collapse', function (event) {
    console.log('الطي اختفى بالكامل');
});
</script>
        

مثال أكورديون متقدم

أنشئ أكورديون أسئلة شائعة معقد مع أيقونات وتنسيق مخصص.

<style>
.faq-accordion .accordion-button:not(.collapsed) {
    color: #0d6efd;
    background-color: #e7f1ff;
}

.faq-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
</style>

<div class="accordion faq-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">
                ما هو Bootstrap؟
            </button>
        </h2>
        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
                Bootstrap هو إطار عمل أمامي قوي لبناء مواقع ويب وتطبيقات ويب متجاوبة ومخصصة للهواتف المحمولة أولاً.
            </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">
                كيف أقوم بتثبيت Bootstrap؟
            </button>
        </h2>
        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
                يمكنك تثبيت Bootstrap عبر CDN أو npm أو عن طريق تنزيل ملفات CSS وجافا سكريبت المجمعة.
            </div>
        </div>
    </div>
</div>
        

الطي المتداخل

أنشئ هياكل طي هرمية من خلال تداخل عناصر الطي.

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#parentCollapse">
    الطي الأب
</button>

<div class="collapse" id="parentCollapse">
    <div class="card card-body">
        <p>هذا محتوى الطي الأب.</p>

        <button class="btn btn-sm btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#childCollapse">
            الطي الابن
        </button>

        <div class="collapse mt-2" id="childCollapse">
            <div class="card card-body">
                هذا متداخل داخل الطي الأب.
            </div>
        </div>
    </div>
</div>
        

تمرين عملي

المهمة 1: أنشئ قسم ميزات المنتج مع الطي:

أنشئ 4 بطاقات ميزات مع عناوين
يجب أن يكون لكل بطاقة زر "اقرأ المزيد" يتوسع لإظهار معلومات مفصلة
استخدم انتقالات سلسة ومسافات مناسبة
أضف أيقونات للإشارة إلى حالة التوسع/الطي

المهمة 2: أنشئ صفحة أسئلة شائعة شاملة مع أكورديون متقدم:

أنشئ 6 عناصر أسئلة شائعة على الأقل منظمة في أكورديون
يجب أن يكون العنصر الأول مفتوحًا افتراضيًا
أضف تنسيقًا مخصصًا مع تأثيرات التمرير
قم بتضمين زر "إظهار الكل" يفتح جميع العناصر برمجيًا
قم بتضمين زر "إخفاء الكل" يطوي جميع العناصر

تحدي إضافي: أنشئ قائمة تنقل متعددة المستويات باستخدام مكونات الطي المتداخلة. قم بتضمين:

عناصر قائمة رئيسية مع قوائم فرعية
قوائم فرعية متداخلة (3 مستويات عميقة)
أيقونات تشير إلى العناصر القابلة للتوسيع
حركات سلسة
تنسيق الحالة النشطة

أفضل الممارسات

استخدم الأكورديون للأسئلة الشائعة والأقسام الغنية بالمحتوى لتحسين قابلية المسح
وفر دائمًا مؤشرات مرئية واضحة (أيقونات/نص) تظهر حالة الطي
تأكد من أن مفعلات الطي يمكن الوصول إليها بلوحة المفاتيح (استخدم عناصر الأزرار المناسبة)
أضف خصائص ARIA المناسبة لقارئات الشاشة
اجعل حركات الطي سلسة وليست بطيئة جدًا (التوقيت الافتراضي جيد)
للأكورديون، قرر ما إذا كان العنصر المفتوح الفردي أو المتعدد يناسب حالة الاستخدام بشكل أفضل
استخدم الطي الأفقي بحذر - يمكن أن يكون مربكًا للمستخدمين
اختبر هياكل الطي المتداخلة بدقة للتأكد من عملها بشكل صحيح
فكر في استخدام فئة show لعرض المحتوى المهم افتراضيًا
أضف حالات التحميل إذا تم جلب محتوى الطي ديناميكيًا

اعتبارات سهولة الوصول

يضيف Bootstrap تلقائيًا خصائص ARIA، لكن تحقق من وجودها
استخدم HTML دلالي (أزرار للمفعلات، وليس divs)
تأكد من عمل التنقل بلوحة المفاتيح (مفاتيح Tab و Enter و Space)
وفر تسميات واضحة تصف ما سيتم توسيعه
اختبر مع قارئات الشاشة للتأكد من الإعلان الصحيح