içerik göster/gizle – bootstrap collapse gelişmişi v1

Ana Sayfa » CSS » içerik göster/gizle – bootstrap collapse gelişmişi v1
CSS, HTML, JavaScript Yorum yapılmamış

bootstrap da daha çok panel içeriğini açıp kapatırken kullandığımız bir collapse özelliğine değinmek istiyorum.
şöyle bir şey yaptım; hemen title yanına göster/gizle seçeneği ekledim.

collapse kullanmak istediğiniz buton yada, div in üzerine "panel-accordion-toggle panel-accordion-toggle-content-tr" şeklinde class ekliyorsunuz. eğer dil istemiyorsanız. sadece “panel-accordion-toggle” eklemeniz de yeterli olacaktır.
bunları kapsayan yada yine aynı alana tıklandığını algılamak için şu şekilde bir class daha eklemeniz gerekiyor "panel-accordion-toggle-click" daha sonra, goster/gizle işlemini yapacak elementin üzerine data-toggle="collapse" ekleniyor. son olarak, hangi objeler gizlenip gösterilecekse, onu belirmek içinde yine aynı elementin üzerine şunu tanımlıyoruz.. data-target="#gidis_ucuslari_all .fly-li"
ilgili class ve javascript komutlarını da ekledikten sonra sistem hazır.


JS içeriği:

$(document).ready(function(){
    $(".panel-accordion-toggle-click").click(function(){
var nesle=$(this).children(".panel-accordion-toggle");
        $(nesle).toggleClass("collapsed");
    var ilgiliDatali = $(nesle).data("target");

    if ($(nesle).attr("class").indexOf("collapsed") >= 0) {
        $(ilgiliDatali).addClass("in");

    } else {
        $(ilgiliDatali).removeClass("in");

    }
    });

});

css içeriği:

.panel-accordion-toggle {
    cursor: pointer;
}

    .panel-accordion-toggle:before {
        float: left;
        font-weight: bold;
        font-size: 1.2em;
        content: " [ - ] ";
    }

     .panel-accordion-toggle.collapsed:before  {
        content: " [ + ] ";
    }
     .panel-accordion-toggle-content-tr:before {
                    content: " [ - Gizle ] ";
     }

     .panel-accordion-toggle-content-tr.collapsed:before {
               content: " [ + Goster ] ";
     }

     .panel-accordion-toggle-content-en:before {
                    content: " [ - Hide ] ";
     }

     .panel-accordion-toggle-content-en.collapsed:before {
               content: " [ + Show ] ";
     }

ÖRNEK VE ÇALIŞIR SİSTEME AŞAĞIDAKİ ADRESTEN ERİŞİM SAĞLAYABİLİRSİNİZ.

http://jsfiddle.net/dilsaz/u67s59v4/1/

YORUM YAZ