Bootstrap Collapse

Bootstrap 4 collapse sınıfları ile sayfa üzerindeki her hangi bir içeriği bir buton ya da link aracılığı ile gösterebilir ya da gizleyebiliriz.

<button data-toggle="collapse" data-target="#demo">Göster/Gizle</button>

<div id="demo" class="collapse">
   Gösterilecek ya da gizlenecek içerik.
</div>

Örnek 1 için tıklayınız.

.collapse sınıfını verdiğimiz etiket (div) gösterilecek ya da gizlenecek içeriği kapsarlar ve bu içeriğin gösterilmesi ya da gizlenmesi için bir buton ile ilişkilendirilmesi gerekiyor.

<div id="demo" class="collapse">
   Gösterilecek ya da gizlenecek içerik.
</div>

ayrıca bu .collapse etiketine bir id değeri vermemiz gerekiyor ki bu etiket ile button ilişkilendirilebilsin.

<button data-toggle="collapse" data-target="#demo">Göster/Gizle</button>

içeriği gösterecek ya da gizleyecek olan <button> etiketi için data-toggle="collapse" özelliğini kullanmalıyız ki; bu bilgi ile butona bu collapse özelliği veriliyor aksi halde butona javascript ile ulaşıp collapse olayını bu şekilde tetiklememiz gerekiyor.

son olarak data-target="#demo" şeklinde içeriğin id 'si ile ilişkilendirme yapmalıyız.

** Varsayılan olarak collapse içerikleri kapalı gelir sayfa ilk yüklendiğinde içeriğin gösterilmiş bir şekilde gelmesi için .show sınıfını kullanmalıyız.

<div id="demo" class="collapse show">
   Gösterilecek ya da gizlenecek içerik.
</div>

Bootstrap 4 ile Accordion Kullanımı

<div id="accordion">

  <div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
  </div>

</div>

Örnek 2 için tıklayınız.