پلاگین Collapse در بوت استرپ زمانی کاربرد دارد که بخواهیم بخشی از متن مخفی شود و تا زمانی که روی آن کلیک نشده است به کاربرنمایش داده نشود.پلاگین collapse در بوت استرپ به صورت پیش فرض تعریف شده است.زمانی که روی دکمه کلیک می شود بخش مخفی متن به کاربر نمایش داده می شود.
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" 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>
</div>
زمانی که روی دکمه کلیک شود متن نمایش داده می شود.به تصویر زیر دقت نمایید.
توضیح مثال بالا :
برای لایه ای که متن درون آن نوشته شده است (تگ div)یک id قرار داده شده است و کلاس collapse به آن اعمال شده است.
برای کنترل (نمایش و عدم نمایش ) محتوا “data-toggle = “collapse به دکمه اضافه شده است.
از id که قبلا برای لایه تعریف شده است(“id=”#demo) استفاده شده و با استفاده از خصوصیت “data-target=”#demo دکمه به محتوای قابل انعطاف متصل شده است.
می توان از لینک (تگ a ) هم به جای دکمه استفاده کردکه در ادامه برای آن مثال خواهیم زد.
برای تگ <a>از ویژگی href به جای مشخصه data-target استفاده کنید.
استفاده از تگ A برای COLLAPSE :
در مثال زیر به جای استفاده از تگ button از تگ a استفاده شده است.
<div class="container">
<h2>Simple Collapsible</h2>
<a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a>
<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>
</div>
خروجی هیچ تفاوتی با عکس های بالا ندارد تنها روش ایجاد آن متفاوت است.
به صورت پیش فرض محتوا پنهان است اما می توانید از کلاس collapse in استفاده کنید تا محتوا به صورت پیش فرض نمایش داده شود.
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse in">
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>
زمانی که کاربر روی گروه های لیست کلیک می کند محتوای آن نمایش داده می شود.
منوهای آکاردئونی (فرو ریزنده) :
منو های آکاردئونی در بوت استرپ زمانی کاربرد دارند که بخواهید حجم زیادی از محتوا را در فضای کمی قراردهید.در مثال های قبل درمورد پلاگین collapse مثال های متعددی زده شدو با آن آشنا شدید.منوهای آکاردئونی را می توان با استفاده از این پلاگین در بوت استرپ ایجاد کرد.در مثال زیر نخوه ایجاد منوهای آکاردئونی در بوت استرپ توضیح داده شده است.
نکته : بدون استفاده از جاوا اسکریپت توسط طراح و فقط با پلاگین collapse در بوت استرپ این کار انجام می شود.
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-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>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-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>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-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>
</div>
می توانم بگویم که برنامه نویسی وب و بازاریابی اینترنتی را ازهرکاری در دنیا بیشتر دوست دارم و همین علاقه موجب شد که همراه آی سی تی را راه اندازی کنم تا اندک دانشی را که در این اقیانوس بیکران صفر و یک دارم با شما عزیزان به اشتراک بگذارم.