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

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:

Ş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:

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:

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:

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:

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.

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:

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.

Son aşamada JavaScript kodumuz şöyle oluyor:

Çalışan koda şuradan bakabilirsiniz:

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.

admin

Hi. I’m Ali. I’m 23. I graduated Mehmet Akif Ersoy University from CS Related Department.

I can code with all programming languages. But today I’m writing .NET and JavaScript.

You may also like...