Collapse
پرش به ناوبری
پرش به جستجو
پنهان شونده (به انگلیسی: 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 ما مراجعه کنید.
منابع آموزشی