jQuery Açılır/Kapanır içerik 2 katmanlı

Merhaba arkadaşlar yaklaşık 5 haftadır baya uygulama yazdım ama bir türlü makale yazmaya fırsat olmadı, neyseki şimdi bir fırsatını buldum ve sizlere güzel anlatımlı bir makale yazacağım.

Uygulama adı :  jQuery Açılır/Kapanır içerik  2 katmanlı

Ön izleme :

jQuery Açılır/Kapanır içerik  2 katmanlı

Hemen kod yapısına geçiyoruz.

Html Kodları;

Css kodlarımız ;

En önemli kısım jQuery kodlarımız ;

Kodlarımız bu kadar arkadaşlar. bu uygulamayı yazarken jquery’nin seçiçilerini kullandık eğer bu seçiçiler hakkında bilginiz yoksa istek üzerine o seçiçiler üzerine makale yazabilirim şimdilik jquery’nin kendi anlatım ve örneklerine sevk ediyorum sizi.

live() , next() , css() , parent() , slideUp() , slideDown()

Şimdi js kodlarımızı adım adım anlatalım.

h1#fakulteBilgileriH1 tagı tıklanıldığında

Tıklanılan h1 tagından sonraki ul.fakulteBilgileri ‘ini bul ve aç

Buraya kadar olan kısım ilk katmanımızdı arkadaşlar yani h1 tagına tıklayınca onun altındaki ul#fakulteBilgileriUl ul’unu açıyoruz ve ikinci katman için kodlarımızı yazıyoruz.

ul#fakulteBilgileriUl li h1 tagına tıklanıldığında

h1 tagından sonra gelen p tagının display değerini gorunurluk diye değişkene at.

Eğer gorunurluk = none ise yani p tagı gösterilmiyorsa

Bu kisimda ise eğer önceden açık bir p tagımız varsa onu kapatıyoruz. İki tane parent yazma sebebim ise ayni sayfa içinde birden fazla bu uygulama kullanılabilir o yüzden birbirlerini
etkilemesinler diye tıklanan h1 tagının iki üstüne çıkıp p tagını arattırdım ve var olan bütün p taglarını kapattırdım.

Eğer p tagı görünmez ise onu görünür yap yani slideDown().

Eğer p tagı görünür ise onu görünmez yap yani slideUp().

Evet arkadaşlar tüm kodlarımız bu kadardır. Css yapısını esnek yaptım belirlediğiniz bir divin içine atarsanız onun boyutu kadar genişleyecektir.
Ayrıca ikinci katmanda hangi p tagının açık gelmesini istiyorsanız onun class’ına “secili” yazarsanız o p tagı açık gelecektir.

Css şeması :
cssSema

Uygulama hakkında takıldığınız noktaları belirtirseniz yardımcı olmaya çalışırım.

“jQuery Açılır/Kapanır içerik 2 katmanlı” üzerine 43 yorum

  1. Bunu ben kendim için yapsaydım jQuery yerinen dolar kullanıyorum ama entegre edilecek sitelerde js çakışmaları olabilir o yüzden jQuery ile adlandırdım @Turgay

  2. Çalışmanız çok güzel olmuş… Umuyorum kullanmamda bir sorun olmaz… Kolay gelsin.

  3. Çok teşekkürler Aycan Bey.
    Aradığım bir uygulama idi. Ancak bir sorum olacak. ilk açılışta yani “Detaylı Tanıtım Bilgilerine” tıklamadan alt bilgilerin görünür olmasını nasıl sağlarız? Tekrar teşekkürler.

  4. ellerine sağlık.Çok başarılı bir çalışma.. Ama benim farklı bir ricam olacak.
    antepia.com.tr/tr/#/yakutpark

    sitesinde “Park Villa” başlığının yanında bulunan aşağı-yukarı değişken (ok) işaretini siteme uygulamak istiyorum. Bu konuda yardımcı olabilir misin?

  5. kodları uyguladığımda bütün içerik açık olarak geliyor. kapatmak için tıklamam gerekli. default olarak kapalı gelmesini nasıl sağlayabilirim?

  6. Aycan Bey merhaba,
    Öncelikle tebrik ederim.Web sitenizi sıksık takip ediyorum çalışmalarınız harika.
    Bu scripti sitemde kullandım.Fakat bazı sorunlar yaşıyorum.
    Mesela sayfanın aşağılarındaki bir içeriğe tıkladığımda sayfa yukarı kayıyor sabit kalmasını nasıl sağlayabilirim.Saygılarımla
    Problem yaşadığım site http://www.hoteleman.com

  7. Detaylı Tanımlama Bilgilerini otomatik açık gözükecek şekilde nasıl ayarlarım acaba?

  8. Merhaba,

    Elinize sağlık öncelikle. Açılır panel üzerinde

    Detaylı Tanıtım

    yazan kısım üzerinde altındaki kısım açık nasıl gelebilir ?

    Teşekkürler

  9. MErhaba Çok Güzel Çalışma Ama Bir Sorum Olacak Acaba Yenı Menuler Nasıl Ekleyebılırım Yarım Eder Mısınz. Ekleme Yapıyorum AMa Menu Açılmıyor.
    Teşekkuerler

  10. peki bunu alt alta uzatmak istersek nasıl bir yol izleyebiliriz? Aşağıdaki şekilde yaptım fakat ana başlıklara tıklayınca diğer ana başlıklar kapanmıyor, var mıdır çözümü?

    Detaylı Tanıtım Bilgileri
    Vizyon ve Misyon
    Tarihçe
    Felan filan

    Detaylı Tanıtım Bilgileri 2
    Vizyon ve Misyon 2
    Tarihçe 2
    Felan filan 2

    Detaylı Tanıtım Bilgileri 3
    Vizyon ve Misyon 3
    Tarihçe 3
    Felan filan 3

  11. Aycan bey ,
    uygulama harika ama menü açılırken animasyonsuz olmasını istiyorum direkt açılsın bunu nasıl sağlayabilirim?

  12. Yaptığınız örnek çok güzel ama şöyle bir sorunum var. Birinci tabloyu tamamlayıp ikinci tabloya geçiyorum ama hepsi birleşik geliyor. div tabloları arasında boşluk olsun istiyorum. bir çok başlık koyacağım için. Nasıl yaparım bunu?

  13. Başlığı tıklayınca aşağıdaki açılan menüler alt alta değilde yan yana nasıl yapabilirim? Biraz bilgi verirseniz size minnettar kalacağım. :/

    1. Yanlış alamadıysam açılan p’leri yan yana veya div’leri yan yana istiyorsanız bu css ile alakalı ama sağdan sola veya soldan sağa açtırmak istiyorsanız o farklı.

  14. Merhabalar,

    Kodlama güzel ama şöyle bir sorunum var. İkinci bir alt satıra geçmek için “p” tagi koyup yazı yazdığımda bu yazı gözükmüyor.. Ne yaparsam yapayım olmadı lütfen yardım edin… 🙁

  15. Merhaba hocam bir konuda sizden yardım alacağım
    Jquery kütüphanesini çektim
    daha sonra div’ler oluşturdum ve display:none; yaptım o divleri

    Araba

    Şeker

    Şimdi hocam 2 tane link ve 2 tane gizli div var linklere tıkladığımda ikiside çalışıyor gayet güzel ama istediğim şu birine tıkladığımda diğeri otomatik kapansın yani bir tanesi açıksa diğerine tıkladığımda o kapanacak tıkladığım açılacak nasıl yapabilirim ?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir