انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: Bootstrap 4 Collapse

Accordion

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

1 صفوف تعليمية
Bootstrap
2,822 مشاهدة

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

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

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

Result


HTML 
    <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>
جرّب بنفسك

جميع فقرات هذا الدرس (Bootstrap 4 Collapse)