Collapse

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳


پنهان شونده (به انگلیسی: 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>


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


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

مثال

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


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


پنل پنهان شدنی

مثال زیر یک پنل پنهان شدنی را نشان می‌دهد:

مثال

 1 <div class="panel-group">
 2   <div class="panel panel-default">
 3     <div class="panel-heading">
 4       <h4 class="panel-title">
 5         <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
 6       </h4>
 7     </div>
 8     <div id="collapse1" class="panel-collapse collapse">
 9       <div class="panel-body">Panel Body</div>
10       <div class="panel-footer">Panel Footer</div>
11     </div>
12   </div>
13 </div>


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


گروه لیست پنهان شدنی

مثال زیر یک پنل پنهان شدنی با گروه لیست داخلش را نشان می‌دهد:

مثال

 1 <div class="panel-group">
 2   <div class="panel panel-default">
 3     <div class="panel-heading">
 4       <h4 class="panel-title">
 5         <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
 6       </h4>
 7     </div>
 8     <div id="collapse1" class="panel-collapse collapse">
 9       <ul class="list-group">
10         <li class="list-group-item">One</li>
11         <li class="list-group-item">Two</li>
12         <li class="list-group-item">Three</li>
13       </ul>
14       <div class="panel-footer">Footer</div>
15     </div>
16   </div>
17 </div>



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


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

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

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

مثال

 1 <div class="panel-group" id="accordion">
 2   <div class="panel panel-default">
 3     <div class="panel-heading">
 4       <h4 class="panel-title">
 5         <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
 6         Collapsible Group 1</a>
 7       </h4>
 8     </div>
 9     <div id="collapse1" class="panel-collapse collapse in">
10       <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
11       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
12       minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
13       commodo consequat.</div>
14     </div>
15   </div>
16   <div class="panel panel-default">
17     <div class="panel-heading">
18       <h4 class="panel-title">
19         <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
20         Collapsible Group 2</a>
21       </h4>
22     </div>
23     <div id="collapse2" class="panel-collapse collapse">
24       <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
25       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
26       minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
27       commodo consequat.</div>
28     </div>
29   </div>
30   <div class="panel panel-default">
31     <div class="panel-heading">
32       <h4 class="panel-title">
33         <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
34         Collapsible Group 3</a>
35       </h4>
36     </div>
37     <div id="collapse3" class="panel-collapse collapse">
38       <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
39       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
40       minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
41       commodo consequat.</div>
42     </div>
43   </div>
44 </div>


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


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

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


منابع آموزشی