Collapse

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

پنهان شونده (به انگلیسی: Collapsible) ساده

Collapsibleها برای زمانی که بخواهید حجم زیادی از اطلاعات را پنهان یا آشکار کنید، مفید هستند: [۱]

مثال

1 <button data-toggle="collapse" data-target="#demo">Collapsible</button>
2 
3 <div id="demo" class="collapse">
4 Lorem ipsum dolor text....
5 </div>


مشاهدهٔ نتیجه


توضیح مثال

کلاس .collapse یک عنصر پنهان شدنی را نشان می‌دهد (یک تگ <div> در مثال)؛ این محتوایی است که با کلیک برروی یک کلید آشکار یا پنهان می شود.

برای کنترل (آشکار /پنهان کردن) محتوای پنهان شدنی، ویژگی data-toggle="collapse" را به یک عنصر<a> یا <button> اضافه کنید. سپس ویژگی data-target="#id" را برای اتصال کلید به محتوای پنهان شدنی به کار ببرید (<div id=”demo”>).

توجه: برای عناصر <a>، می‌توانید از ویژگی href بجای ویژگی data-target استفاده کنید:

مثال

1 <a href="#demo" data-toggle="collapse">Collapsible</a>
2 
3 <div id="demo" class="collapse">
4 Lorem ipsum dolor text....
5 </div>


مشاهدهٔ نتیجه


بطور پیش فرض، محتوای پنهان شدنی، پنهان است. با این حال می‌توان کلاس .show را برای نشان داده محتوا بطور پیش فرض اضافه کنید:

مثال

1 <div id="demo" class="collapse show">
2 Lorem ipsum dolor text....
3 </div>


مشاهدهٔ نتیجه


آکاردئون (به انگلیسی: Accordion)

مثال زیر آکاردئون ساده‌ای را توسط گسترش مؤلفه پنل نشان می‌دهد.

توجه: زمانی که یکی از آیتم‌های پنهان شدنی آشکار می‌شود، از ویژگی data-parent برای تضمین اینکه همهٔ عناصر پنهان شدنی تحت والد خاص بسته خواهند شد استفاده می‌شود.

مثال

 1 <div id="accordion">
 2 
 3   <div class="card">
 4     <div class="card-header">
 5       <a class="card-link" data-toggle="collapse" href="#collapseOne">
 6         Collapsible Group Item #1
 7       </a>
 8     </div>
 9     <div id="collapseOne" class="collapse show" data-parent="#accordion">
10       <div class="card-body">
11         Lorem ipsum..
12       </div>
13     </div>
14   </div>
15 
16   <div class="card">
17     <div class="card-header">
18       <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
19         Collapsible Group Item #2
20       </a>
21     </div>
22     <div id="collapseTwo" class="collapse" data-parent="#accordion">
23       <div class="card-body">
24         Lorem ipsum..
25       </div>
26     </div>
27   </div>
28 
29   <div class="card">
30     <div class="card-header">
31       <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
32         Collapsible Group Item #3
33       </a>
34     </div>
35     <div id="collapseThree" class="collapse" data-parent="#accordion">
36       <div class="card-body">
37         Lorem ipsum..
38       </div>
39     </div>
40   </div>
41 
42 </div>


مشاهدهٔ نتیجه


مرجع کامل Collapse بوت استرپ ۴

برای دسترسی به مرجع کامل همه امکانات Collapse، متدها و رویدادها(Events)، به مرجع کامل بوت استرپ 4 JS ما مراجعه کنید.


منابع آموزشی