Bootstrap 4 Göster/Gizle (Collapse)

Bootstrap 4 Göster/Gizle İşlemi (Collapse)

Web sayfaları hazırlanırken bazı bölümlerin gizlenmesi ve sadece istenildiğinde ortaya çıkarılması, tasarımcılar için büyük kolaylıklar sağlamaktadır.
Ö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.
Not: Collapse işlemi için jquery.js ve bootstrap.js isimli javascript kütüphane dosyalarının mutlaka sayfamıza çağırılmış olması gerekir. (Tıklama işlemi bu dosyalar sayesinde algılanacaktır)

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 class="btn btn-danger" data-toggle="collapse" href="#collapse_ornek"> A etiketi href collapse </a> <div class="collapse" id="collapse_ornek"> Bu bölüm ilk gizlenmiştir, buton vasıtasıyla görünmüştür. Butona tekrar tıklandığında yeniden gizlenecektir. </div>
Örnek: button etiketi
<button class="btn btn-warning" type="button" data-toggle="collapse" data-target="#collapse_ornek"> Button etiketi data-target collapse </button> <div class="collapse" id="collapse_ornek"> Bu bölüm ilk gizlenmiştir, buton vasıtasıyla görünmüştür. Butona tekrar tıklandığında yeniden gizlenecektir. </div> 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.
Örnek :
<p> <a class="btn btn-primary" data-toggle="collapse" href="#eleman1" role="button">Göster/Gizle 1. eleman</a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#eleman2">Göster/Gizle 2. eleman</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".coklu_eleman">Göster/Gizle Tüm Elemanlar</button> </p> <div class="row"> <div class="col"> <div class="collapse coklu_eleman" id="eleman1"> <div class="card-body"> Burası 1. eleman ilk button ile gösterilip gizlenir. </div> </div> </div> <div class="col"> <div class="collapse coklu_eleman" id="eleman2"> <div class="card-body"> Burası 2. eleman ilk button ile gösterilip gizlenir. </div> </div> </div> </div>

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ü
<div id="akordeon"> <div class="card"> <div class="card-header" id="baslik1"> <h5 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#akordeon1"> Akordeon 1 </button> </h5> </div> <div id="akordeon1" class="collapse show" data-parent="#akordeon"> <div class="card-body "> Akordeon 1 - Bu alana show sınıf özelliği verildi. Bu alan varsayılan açık olacaktır. </div> </div> </div> <div class="card"> <div class="card-header" id="baslik2"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#akordeon2"> Akordeon 2 </button> </h5> </div> <div id="akordeon2" class="collapse" aria-labelledby="headingTwo" data-parent="#akordeon"> <div class="card-body text-justify"> Akordeon 2 - Bu alana collapse sınıf özelliği verildi. Bu alan varsayılan kapalı olacaktır. </div> </div> </div> <div class="card"> <div class="card-header" id="baslik3"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#akordeon3" a> Akordeon 3 - </button> </h5> </div> <div id="akordeon3" class="collapse" data-parent="#akordeon"> <div class="card-body text-justify"> Akordeon 3 - Bu alana collapse sınıf özelliği verildi. Bu alan varsayılan kapalı olacaktır. </div> </div> </div> </div>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com