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 ما مراجعه کنید.

« صفحهٔ قبل

صفحهٔ بعد »