jQuery’de Açılır-Kapanır Div

jQuery jQuery / Ajax / JavaScript kategorisinin ikinci makalesi ile artık jQuery ye adım atıyoruz şimdiki konumuz basit ama konunun temel bilgi olması için üzerinde biraz fazla duracağım. Bundan sonraki derslerimizde jQuery ile post işlemleri gibi işlemler yapcağız, şimdiki konumuz jQuery deki slideUp() , slideDown() ve toggle() fonskiyonlarını kullanmak.

İndex.html sayfamızı hazırlıyoruz
Öncelikle tagları arasına jquery.js dosyasımızı entegre ediyoruz. ( jquery.js dosyamız js/ dizinin altındadır. )

 

Şimdi arkadaşlar 2 şekilde div açma ve kapatmayı yapabiliriz şimdi birinci yolu göstereceğim.

Birinci Yol

Aşağıdaki kodları <head> </head> tagları arasına yazıyoruz.

 

Bu kodlar belki zor görünüyor gibi gelebilir ama korkmaya gerek yok arkadaşlar teker teker anlatacağım.

belge tamamen yüklendiğinde xxxxxxx diye belirttiğimiz fonksiyonları çalıştır.

Burada Menu class’ının altındaki herhangi bir <a></a> tagına tıklandığında yyyyyy işlemini gerçekleştir diyoruz.

Burada ise

 

Div’îni slideDown yani aşağıda doğru slayt efektiyle açıyor.

Burada slideDown yerine slideUp toggle taglarınıda kullanabilirsiniz aslında daha fazla etiket kullanabilirsiniz ama şimdilik ben bu üç fonksiyonu anlatıyorum.

Bu Birinci yoldu yani jQuery’de de belirttin xx adlı ziyaretçi şu divin içindeki şu <a></a> tagına tıklarsa şu divi aç diye belirttik.

Demo :

slideUp
slideDown
Toggle

İkinci Yol

Şimdi ise direk biz istediğimiz <a></a> tagına değer vereceğiz. öncelikle jquery.js dosyasını <head></head> tagları arasına entegre ediyoruz.

 

jquery.js yi entegre ettikten sonra sitemizdeki herhangi bir <a> </a> tagına gidip

 

 

Divleri aç / kapat linkine tıkladığımız zaman #Aycan div’ini aşağı doğru açacak #Zone divini ortadan kaldıracak.

Burada slideUp fonksiyonun yerine slideUp() , slideDown() ve toggle() bu fonksiyonlarıda yazabilirsiniz.

Demo : Toggle

Sonuç :

Umarım anlamışssınızdır, anlamadığınız kısımları konu altında belirtirseniz elimden geldiğince yardım etmeye çalışacağım bu arada artık jQuery anlatımları için bir klasör oluşturdum onu şuan veriyorum artık bütün değişiklikler orda olacak.

“jQuery’de Açılır-Kapanır Div” üzerine 40 yorum

  1. 1.yolu boşver.değer vermek bi bu işte yarıyor. 2.yoldan devam slidedown klasik div kafası .
    içeriklerinizi beğeniyle takip ediyoruz .

  2. Merhabalar hocam yazdığınız herşeyi uyguladım ancak bir türlü yapamadım kodlarımı versem yardımcı olurmusunuz?

    Div Kodlarım;
    ——————————————–

    Yorum Yazar mýsýn?

    Adýnýz:

    E-Posta:

    Yorumunuz:

    ———————————–

    Css Kodlarım;

    ———————————–

    #yorum-yaz {background: url(images/yorum.png); border: 1px solid #efadad; margin-top: 5px; color: #4f4f4f;}
    .yorum-yaz {padding: 5px;}
    .ad-soyad {background: url(images/input.png); border: 1px solid #dedede; color: #919191; padding: 3px; width: 200px;}
    .eposta {background: url(images/input.png); border: 1px solid #dedede; color: #919191; padding: 3px; width: 200px;}
    .yorumunuz {background: url(images/textarea.png); border: 1px solid #dedede; color: #919191; padding: 3px; font-family: Tahoma; font-size: 12px; width: 350px;}
    .yorum-yaz-baslik {color: #7e2a2a; font-size: 15px; font-weight: bold; border-bottom: 1px solid #f5cece; padding: 0 0 3px 0; margin-bottom: 3px;}
    .yorum-gonder {background: url(images/yorum-gonder.png); width: 90px; height: 23px; border: 0;}

    /* Yazýlan Yorum */
    .yazilan-yorum {border: 1px solid #a0c6da; background: url(images/yorum-bg.png); margin-top: 5px;}
    .yazilan-yorum1 {padding: 5px;}
    #kaplama {width:500px;float:left;}
    .kutu {width:250px;height:200px;float:left;margin:0px;padding:0px;}
    ————————————————————-

    sölediğiniz 2 yoluda denedim olmadı acaba nerde yanlış yapmış olabilirim?

  3. merhaba SlideUp daki gibi yukarıdan aşşağıya doğru acılma olayını toggle() yukarıdan aşşağıya doğtru acıp aşşağıdan yukarı doğru kapatma olayı varmı toggle() yada başkası acaba.

  4. Aycan BÜLBÜL Arkadaşımıza Teşekkürler…..

    Buna Benzer Daha da Basit Çalışmlarla Bizleri Aydınlatırsa Daha Memnun Kalacağımızı Düşünerek Herkese İyi Çalışmalar Dilerim.

    Saygılarımla;
    Yakup TAŞLIBEYAZ

  5. bu divlerle başım belada dostum ya 🙂
    bide şu h1 etiketi yan yana kullanınca alt satıra geçemsini istemiyorum ama ne yazmam lazım ? çözemedim h1 tagı yan yana iki keliemye uygulayınca alt satıra geçmemesi için…

  6. merhaba , bana facebook Sohbetteki gibi üye ismine tıklanınca açılan div ler gerekli ,hazır sayfa linki aşağıda.burdaki alt barı kullanıyorum ama üye ismine tıklanınca popup olarak açtırıp sohbet yaptırabildim ancak,faceteki gibi sistemi uyarlayamadım.bunu nasıl yapabiliriz arkadaşlar acaba,faceteki mantık nedir,sanırım .appenTo() ile yeni bir div oluşturuluyor ama sohbet yazıları nasıl o div içindeki text alana getiriliyor ve bu tablar nasıl o barda aktif olarak kalıyor her üyeye ayrı ayrı,bunun hakkında yorumlarınızı bekliyorum arkadaşlar lütfen.
    mail adresime konu ile alakalı bir mail atarsanız eğer cevaplanırsa konu ,sevinirim…

    http://www.sohtanaka.com/web-design/examples/footer-panel/#

  7. Aycan Arkadaşımızı Tebrik Ediyorum

    Gerçekten Mükemmel Bir Paylaşım

    Anlatım Güzel
    Kodlar Sade
    ve En Önemlisi
    Kendi Projeme Entegre Etmekte Hiç Sıkıntı Yaşamadım Buda Aycan Arkadaşımızı jQuery konusunda Farklı Kılıyor.

    İyi Çalışmalar

    Yakup TAŞLIBEYAZ

  8. Merhabalar Aycan bey,
    Anlattığınız div sayfa ilk açıldığında açılır bi şekilde geliyor ben tam tersi sadece Başlık görünsün tıkladıktan sonra alt başlıklar açılsın istiyorum, ne yapmalıyım yardımcı olursanız sevinirim.

  9. ben animasyonlu açılsın istemiyorum basınca açılsın tekrar basınca kapatsın istiyorum.. yardım pls.

  10. Merhaba. paylaştığınız bu kod ile kendi kendime birşeyler yapmaya çalıştım. Bu kodlaarı blogum üzerine uygulamaya çalıştım. Fakat bazı yerlerde sıkıntılar yaşadım.

    mesela, “Menu İki div’ini aç / kapat” olarak bir kaç tane eklemeye çalıştım içlerine yazı resim video filan ekledim. ama iki tane ekledikten sonra eklediklerim gözükmemeye başladı. Yardımlarınızı bekliyorum.

  11. Merhaba.
    jquery çalışmanızı hazırlamaya çalıştığım web sitesine ekledim sorunsuz çalıştı teşekkür ederim. yanlız şöle bir sıkıntım var şuan: aynı query’yi iki sefer ekledim iki farklı div için ilkini seçtiğim zaman ikici kelimeyi yana doğru kaydırıp getiriyor div’in içindeki verileri.

    Bense ikinci gizlenmiş olan div’imi alta kaydırıp ilkini açmasını istiyorum. varmıdır bir yolu yordamı?

  12. Merhaba birşey sormak istiyorum.
    örneğin a ve b adında 2 sayfam var ve bunların içinde de birden çok div lerim var. bu divleri butonlarına tıklayınca açabiliyorum fakat a sayfasından b sayfasına link verip b deki divi açamıyorum. bunu nasıl sağlayabilirim ?

    Aşağıdaki scripti kullanıyorum.

    $(document).ready(function(){
    $(“#toggle-btn”).click(function(){
    $(“#toggle-example”).collapse(‘toggle’);
    });
    });

  13. Kod olarak attım ama sayfa o kodları çalıştırmış sanırsam kodları ufaktan bozarak atıyorum.

    Clsick to Toogle

    If you don’t like something, change it.
    If you can’t change it, change your attitude.

  14. Merhaba ; benim yapmak istediğim şu , aynı sayfa içerisinde butona bastıktan sonra araya tam sayfa reklam sokmak ve aynı sayfanın urlsi buraya yönlenecek ve yönlendikten sonra ( reklam kodu reklamı geçtikten sonra aynı sayfaya geliyor ) bunun otomatik açılması , ben işin içinden çıkamadım.

  15. merhaba ben butona basıldığında var olan tablonun bir satırının aşağı doğru inmesini istiyorum bunu nasıl yapabilirim?

  16. Merhaba, Toggle olayını çok rahat kullanabiliyorum fakat yapmak istediğim birşey var ve iki gündür çözümünü bulamadım, şöyle ki elimde 4 adet resim var bunların her birine tıklandığında üst kısımlarında onlara ait bilgiler çıkıyor, buraya kadar tamam fakat birine tıkladığımda açılsın bir diğerine tıklama yaptığımda açık olan divi kapatıp tıkladığım içeriği olan divi açsın istiyorum fakat olmuyor hepsini alt alta açıyor, bunun için nasıl bir fonksiyon kullanmalıyım yardımcı olabilirseniz çok sevinirim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir