AnasayfaBootstrapBootstrap Collapse ve Accordion Sınıflarının Kullanımı
29

Bootstrap Collapse ve Accordion Sınıflarının Kullanımı

nhtctn nhtctn
20 Eylül 2020 Bootstrap

Bootstrap 4 collapse sınıfları ile içerikleri gösterip gizleme nasıl yapılır? Boostrap accordion kullanımı nasıl yapılır?

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>

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

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

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>

Yorum yazın

BENZER YAZILAR