Jquery ile Açılıp Kapanabilen Bootstrap Panel Oluşturmak - Designing Open-Close Bootstrap Panel with Jquery

Bu yazıda bootstrap panelin nasıl açılıp kapanabilen bir yapı haline getirilebileceği konusu işlenecektir. Bootstrap panel div elementleri ile oluşturulan, yorum alanları, içerik görüntülemeleri veya kısa gösterimler gibi bir çok alanda kullanılabilen kullanım alanı geniş bir ögedir. Bootstrap panel aşağıdaki kod bloğu ile oluşturulmaktadır:

<div class="panel panel-primary">
<div class="panel-heading">
Panel with panel-primary class <span class="glyphicon glyphicon-circle-arrow-up" style="float: right;"></span></div>
<div class="panel-body">
Panel Content</div>
</div>

Burada "panel panel-primary" ile "primary" tipinde bir bootstrap panel oluşturulacağı belirtilmektedir. "panel-heading" panelin başlık alanını, "panel-body" ise panelin içeriği taşıyacağı esas alanını belirtmektedir. Başlık içine eklenen "glyphicon" içeren "span" elementi ile panelin durumunu gösteren resim panel başlağına eklenmektedir. "float:right" yapılarak ok işaretinin sağ tarafa kayması sağlanmaktadır. "glyphicon-circle-arrow-up" yukarı işaretinin ekleneceğini belirtmektedir.

Panel HTML kodları oluşturulduktan sonra açılıp kapanma özelliğinin panele kazandırılması için aşağıdaki Jquery javascript kodlarının eklenmesi gerekmektedir:

$(document).ready(function(){
    $(".panel-primary").children(".panel-heading").click(function(){
        $(this).parent().children(".panel-body").toggle();
        $(this).children(".glyphicon").toggleClass("glyphicon-circle-arrow-up");
        $(this).children(".glyphicon").toggleClass("glyphicon-circle-arrow-down");
    });
});

Yukarıdaki kod ile başlık ögesinin "click" olayı yakalanmakta ve toggle() fonksiyonu ile panel içeriğinin görünüp kaybolması sağlanmaktadır. "span" elementinin sınıfı da aynı anda değiştirilerek okun durumu güncellenmektedir.

Yukarıda yer alan kodların çalıştırılması ile aşağıdaki sonuç elde edilmektedir:

Panel with panel-primary class

Panel Content
Panel Content2
Panel Content3
Panel Content4