Collapse

از موتو کد، دانشنامهٔ برنامه‌نویسی

پنهان شونده (Collapsible) ساده[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>


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


توضیح مثال[ویرایش | ویرایش]

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

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

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

مثال[ویرایش | ویرایش]

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>


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


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

مثال[ویرایش | ویرایش]

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


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


پنل پنهان شدنی[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>


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


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

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

مثال[ویرایش | ویرایش]

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
      </ul>
      <div class="panel-footer">Footer</div>
    </div>
  </div>
</div>



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


آکاردئون (Accordion)[ویرایش | ویرایش]

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

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

مثال[ویرایش | ویرایش]

<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>


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


مرجع کامل Collapse بوت استرپ[ویرایش | ویرایش]

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

منابع آموزشی[ویرایش]