Bootstrap 4 Göster/Gizle İşlemi (Collapse)
Örneğin bir kişiye ait bilgilerin ilk başta gizlenmesi ve yalnızca Bilgileri Görüntüle butonuna tıklandığında görüntülenmesi ve butona tekrar tıklandığında yine gizlenmesi, sayfadaki alanımızın verimli kullanılması açısından büyük kolaylıklar sağlamaktadır.
Önemli Not: Bir butona tıklandığında olay gerçekleşmesi(div görünmesi vb.) ve aynı butona tıklandığında durumun eski haline gelmesi(div'in tekrar gizlenmesi) işlemine toggle olayı denir. Bir buton olayı başlatır ve olayı geri alır.
Bir butona bağlı gösterip gizleme olaylarına Bootstrap4'te collapse adı verilir.
Collapse işlemi için en az bir butona ve gizlenip gösterilecek nesneye ihtiyacımız vardır. Buton ve nesnemiz arasındaki ilişki nesne içindeki id parametresi üzerinden sağlanacaktır.
Butonumuz eğer a etiketi ise href paratmetresine nesneye verdiğimiz id değeri verilerek aralarındaki bağ kurulmuşn olur.
Butonumuz eğer button elemanı ise data-target parametresine nesnenin id'sine verdiğimiz değeri vererek button ve nesneyi birbirine bağlamış oluruz.
Örnek: a etiketi
A etiketi href collapse
Bu bölüm ilk gizlenmiştir, buton vasıtasıyla görünmüştür. Butona tekrar tıklandığında yeniden gizlenecektir.
Örnek: button etiketi
Button etiketi data-target collapse
Yukarıdaki kod bloklarında görüldüğü gibi button ve a etiketlerine data-toggle="collapse" kodunun da eklenmesi gerekir.
Çoklu Göster/Gizle (Multiple) Collapse İşlemi
Tek button ile aynı anda birden fazla nesneye göster/gizle işlemi uygulanabilmektedir. Bunun için göster/gizle uygulanacak nesnelere class özelliği eklenmeli ve bu class özelliği button nesnesinin data-target parametresine verilerek button ile bağlantısı sağlanmalıdır.data-targetparametresine class özelliği vereceğimiz için özellik adının başına . işareti konmasına dikkat edilmelidir.
Göster/Gizle 1. eleman
Göster/Gizle 2. eleman
Göster/Gizle Tüm Elemanlar
Burası 1. eleman ilk button ile gösterilip gizlenir.
Burası 2. eleman ilk button ile gösterilip gizlenir.
Boostrap4 Akordeon Menü
Akordeon menüler temelde collapse mantığı ile çalışırlar, bir buton ve açılıp kapanacak birkaç div kullanılarak bir akordeon menü oluşturulabilir. Göster/Gizle(collapse) işlemine birkaç özellik eklenerek kolayca bir akordeon menü oluşturulur. Bu özellikler görünecek bölüm için show özelliği, görünmeyecek bölümler için collapsed class özellikleridir.
Örneğin sayfa ilk açıldığında görünmesini istediğimiz bölüm akordeon 1 ise, bu bölüme show özelliği, görünmemesini istediğimiz bölümlere ise collapsed özelliği vermeliyiz.
Ayrıca tüm birimleri bir arada tutabilmek için akordeon menümüzün en dışına kapsayıcı bir div oluşturmalıyız ve bu div'e bir id değeri vermeliyiz. Devamında ise Göster/Gizle yapılan veri içeriklerinin bulunduğu divlere data-target="#akordeon" özelliği verilerek en dıştaki div'in kapsayıcı olduğunu belirtmeliyiz.
Örnek : Akordeon Menü
Akordeon 1 - Bu alana show sınıf özelliği verildi. Bu alan varsayılan açık olacaktır.
Akordeon 2 - Bu alana collapse sınıf özelliği verildi. Bu alan varsayılan kapalı olacaktır.
Akordeon 3 -
Akordeon 3 - Bu alana collapse sınıf özelliği verildi. Bu alan varsayılan kapalı olacaktır.