Bootstrap

Bootstrap 4 Collapse

ستتعلم في هذا الدرس عمل ال Collapse وهو اخفاء محتوي واظهارة عن طريق button بواسطة ال Bootstrap 

التاريخ

05 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1039

المواضيع

6
الشروحات chevron_left Bootstrap 4 Collapse chevron_left Bootstrap

Bootstrap 4 Collapse

</> Bootstrap 4 Collapse

ال Collapse هو إخفاء محتوي وإظهاره عن طريق button يمكنك استخدامه بسهوله عن طريق الخطوات التالية :

  • قم بعمل button ثم ضف له  collapse class 
  • قم بإضافة attribute لل button وهي data-toggle قم بإضافة value وهي collapse
  • قم بإضافة div للمحتوي الذي تريد اخفاؤه واظهاره عند الضغط علي ال button 
  • قم بإضافة attribute لل div وهي id قم بإضافة value وهي demo يمكنك تسميته اي اسم كما تشاء
  • قم بإضافة attribute لل button وهي data-target قم بإضافة value وهي demo# لاحظ انها هي نفس الاسم بداخل ال id الخاص بال div

Result

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

يظهر الكود بهذا الشكل على المتصفح

 <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

</> Accordion

استخدم ال data-parent attribute مع ال href attribute لربطهم معاً لكل item نفس الاسم 

Result

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

يظهر الكود بهذا الشكل على المتصفح

    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.