Jquery ile Boostrap Akordiyon Menü Oluşturmak - Designing Bootstrap Accordion Menu with Jquery

Bu yazıda Bootstrap "Pills" kullanılarak akordiyon menü oluşturulacaktır. İlk aşamada "Vertical Pills" yani dikey hapları oluşturacak Bootstrap kodunu yazalım:

<ul id="VerticalMenu1" class="nav nav-pills nav-stacked">
    <li><a data-toggle="tab" href="#">Home <span class="glyphicon glyphicon-chevron-down" style="float: right;"></span></a></li>
    <div class="panel-body" style = "display:none;">
    Section1
    </div>
    <li><a data-toggle="tab" href="#">Menu 1<span class="glyphicon glyphicon-chevron-down" style="float: right;"></span></a></li>
    <div class="panel-body" style = "display:none;">
    Section2
    </div>
    <li><a data-toggle="tab" href="#">Menu 2<span class="glyphicon glyphicon-chevron-down" style="float: right;"></span></a></li>
    <div class="panel-body" style = "display:none;">
    Section3
    </div>
    <li><a data-toggle="tab" href="#">Menu 3<span class="glyphicon glyphicon-chevron-down" style="float: right;"></span></a></li>
    <div class="panel-body" style = "display:none;">
    Section4
    </div>
  </ul>

Burada önemli unsurlardan biri "data-toggle" niteliğidir. Bu nitelik ile ögenin üstüne tıklandığında otomatik olarak "active" sınıfının ögeye eklenmesi sağlanmaktadır. Detay gösteren div'lerin display niteliği "display:none" yapılarak div'ler görünmez hale getirilmektedir.

Akordiyon özelliğini tanımlamak amacıyla aşağıdaki javascript kodlarını oluşturalım:

$(document).ready(function(){

   $("#VerticalMenu1.nav.nav-pills.nav-stacked > li").click(function(){
     
     var parentElement = this;
     var section = $(parentElement).next("div").first();

     if(!$(section).is(":visible"))

       $(section).slideDown({ duration:"fast", complete: function(){
  
            UpdateArrow($(section).is(":visible"), parentElement);
       }});
     else
       $(section).slideUp({ duration:"fast", complete: function(){

            UpdateArrow($(section).is(":visible"), parentElement);
       }});

   });

});

function UpdateArrow(Visible, Obj)
{
   if(Visible)
   {
      $(Obj).find("span").addClass("glyphicon-chevron-up");
      $(Obj).find("span").removeClass("glyphicon-chevron-down");
   }else
   {
      $(Obj).find("span").removeClass("glyphicon-chevron-up");
      $(Obj).find("span").addClass("glyphicon-chevron-down");
   }

}

Burada jquery "slideUp()" fonksiyonuyla detay alanı kapatılmakta, "slideDown()" fonksiyonu ile detay alanı açılmaktadır. Jquery "next()" fonksiyonuyla sonraki çocuk elementler seçilmektedir. Jquery "find()" fonksiyonu ile DOM üzerinde derin arama yapılmaktadır.

Ok, animasyon olay akışı dışında güncellendiği zaman animasyonun iptal edildiği durumlarda yanlış durama geçebilmektedir (Örn. Hızlı çift tıklama veya seri tıklama). Bu sebeple ok durumunu güncelleme işlemi "complete" olayında yapılmaktadır. Bu olay animasyon tamamlandığında tetiklenmektedir. Animasyon tamanlandığında detay div'in görünürlüğü kontrol edilmekte ve ok durumu düzenlenmektedir.

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

• Home
Section1
• Menu 1
Section2
• Menu 2
Section3
• Menu 3
Section4