JavaScript ile Collapse Div Oluşturmak

Selamlar bir önceki yazı PostgreSQL hakkındaydı. O seri aklımda devam edecek. Bu yazı JavaScript ile Collapse Div Oluşturmak bilgiler içerek. Baştan söyleyeyim bu best practice içeren bir yazı değildir. Sadece mantığına aşina olmak açısından bilgiler alsak yeterli olur.

JavaScript ile Collapse Div Oluşturmak

Bootstrap ya da benzeri CSS frameworkler kullandıysanız bu dediğim olaya denk gelmişsinizdir. JavaScript ile Collapse Div Oluşturmak ile anlatmak istediğim şey örneğin collapsible bir panel olabilir. İçeriği tıklamayla gösterilir ve gizlenir. Tabi burada en önemli şey bunun hafif animasyonlu şekilde sağlanmasıdır ki göze hoş gelsin. Peki biz nasıl yaparız?

Neler Kullanacağız?

Öncelikle kullanılacak teknoloji seçilmeli. Ben bu yazıda herhangi bir şekilde jQuery kullanmayacağım. Düz yani VanillaJS ile işimi halledeceğim. CSS tarafında ise SCSS kullanıyorum. Tekrar söylemek istiyorum bu yazı mükemmel kodlardan oluşmuyor. Sadece saf JavaScript kullanarak bunu nasıl yapacağınızı gösterecektir.

HTML Yapısını Oluşturalım

Temel HTML yapımız kapsayıcı genel bir divi içersin. Bu div accordion classını alsın. Divin içine iki adet div ekleyelim. Title ve content şeklinde. Kısacası kodlarımız şöyle:

<div class="accordion">
    <div class="title">Click me</div>
    <div class="content">
        This will be hide / unhide
    </div>
</div>

Şu anda herhangi bir stil verilmediği için biçimsiz çirkin görünüme sahip oluyor. Dert etmeyin oraya doğru geliyoruz.

CSS Yapısını Oluşturalım

Bu kısımda SCSS kullanacağız demiştim. Merak edenler Adem abinin videolarını izleyebilirler.

İki noktada sabit padding kullandığım için tekrarı azaltmak adına bir değişken oluşturuyorum. Adı $padd olacak. Sonra da kapsayıcı accordion classını yazıyorum:

$padd: 10;
.accordion {
    width: 400px;
    height: auto !important;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
}

Ardından diyorum ki ben bu classın içinde altında yer alan title classına da dokunup bazı ayarlamalar gerçekleştireceğim:

$padd: 10;
.accordion {
    width: 400px;
    height: auto !important;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    
    & .title {
        padding: $padd + px;
        background-color: #e8e8e8;
        
    }
}

Selectorleri yine Adem abi anlatmıştı o yüzden ampersand nedir onu anlatmıyorum ama this gibi söyleyelim. Buradaki padding propertysine padd değişkeninden gelen değeri atıyoruz. Son olarak da content classına aynı şekilde dokunuyoruz:

$padd: 10;
.accordion {
    width: 400px;
    height: auto !important;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    
    & .title {
        padding: $padd + px;
        background-color: #e8e8e8;
        
    }
    
    & .content {
        padding: 0px 10px 0px 10px;
        color: red;
        opacity: 0;
        height: 0px;
        visibility: hidden;
        transition: opacity 400ms, visibility 400ms, padding 400ms;
    }
}

Aslında content’e kadar temel işlemleri yaptık padding, background gibi işlemler. Fakat content’e gelince visibility, transition gibi opacity gibi işlemler devreye girdi. Görünürlük durumunu hidden yaptım ve opacity değerini de 0 yaptım artık başlangıçta divim görünür değil.

Transition işlemleri üç başlık için aktif olmalı. Bunlardan birisi opacity. Başlangıç olan opacity değerim 0 -> 1 olacağı için 0.1 gibi artışları 400 ms içinde tamamla diyorum. Tabi visibility ve padding değişimleri de aynı süreçte değişsin istiyorum. Geliyoruz JavaScript tarafına

JavaScript ile Title Divini Yakalayalım

Bu aslında en temel bilinmesi gereken şeylerden birisi. Çok üzerinde durmuyorum ama şöyle yakalayalım:

var title = document.querySelector(".title");
var opa = "";
var height = "";
var visible = "";
var padding = "";

Fark ettiyseniz opa adında opacity değerini temsil eden bir değişken ve height, visible, padding gibi diğer değişkenler burada oluşturuldu. Sıra geldi title classına sahip elementin tıklanma yani click eventini yakalayıp, bu elementin stil değerlerini javascript api üzerinden almaya.

title.addEventListener("click", () => {
    var titleEl = title
        .parentNode
        .querySelector(".content")
        .style;
}

Aslında dikkatle bakacak olursak alınan değer parentNode içerisindeki content’in style değeri. Sonra basit bir if-else işlemi yapmalıyız:

if(titleEl.opacity == "1") {
        opa = "0";
        height = "0px";
        visible = "hidden";
        padding = "0px 10px 0px 10px";
    } else {
        height = "auto";
        visible = "visible";
        opa = "1";
        padding = "10px";
    }

Bu işlemde yakalanan content elemanına ait opacity değerini alıp eğer 1 ise şunu değilse şunu yap gibi bir karşılaştırmaya işlemine sokuyoruz. Son aşamada ise bu değerleri content’e yani titleEl değişkenine veriyoruz.

titleEl.opacity = opa
titleEl.height = height;
titleEl.visibility = visible;
titleEl.padding = padding;

Son aşamada JavaScript kodumuz şöyle oluyor:

var title = document.querySelector(".title");
var opa = "";
var height = "";
var visible = "";
var padding = "";

title.addEventListener("click", () => {
    var titleEl = title
        .parentNode
        .querySelector(".content")
        .style;

    if(titleEl.opacity == "1") {
        opa = "0";
        height = "0px";
        visible = "hidden";
        padding = "0px 10px 0px 10px";
    } else {
        height = "auto";
        visible = "visible";
        opa = "1";
        padding = "10px";
    }
    
        
        titleEl.opacity = opa
        titleEl.height = height;
        titleEl.visibility = visible;
        titleEl.padding = padding;
})

Çalışan koda şuradan bakabilirsiniz:

https://codepen.io/aligoren/pen/JOePGO

Bu yazıda JavaScript ile Collapse Div Oluşturmak hakkında bilgi sunmaya çalıştım. Umarım faydalı olabilmişimdir. Çok çok daha basit şekillerde de halledilebilir bir şey bu ama temel olarak JavaScript apisinin nasıl kullanılacağını tek tek göstermek istedim. Sorularınız varsa beklerim.

Okuduğunuz için teşekkürler.