Jquery Toggle efekti (Göster/Gizle)

[κεıƨʟч]

Merhaba herkese. Bu konuda sizlere Toggle efektinin kullanışını anlatacağım. Umarım faydalı olur.

-Nedir bu Toggle efekti ?
+ Bu efekt ile sitenizde, tasarımlarınızda herhangi istediğiniz bir yere açılır/kapanır özelliği kazandırabilirsiniz.
-Peki nasıl yapılır ?
+ Hemen anlatayım. Öncellikle 2 adet alana ihtiyacımız var. Bunlardan birincisi açma/kapama komutunu vereceğimiz yer(bu bir buton olabilir, bir resim olabilir, bir yazı olabilir). İkincisi gizlenecek/gösterilecek alan. 
Örnek:

Kod:

Kod: Tümünü Seç Tümünü Kopyala

<div class="komutyeri">Tıkla</div>
    <div class="gizlenecekyer">
        içerik 
    </div>

Bu şekilde oluşturduk. "komutyeri" classlı alana tıkladığımızda "gizlenecekyer" classlı alan gizlenecek veya gösterilecek. Alanları oluşturduk. Şimdi de script kodlarımıza geçelim. Kullanmamız gereken script kodları aşağıda:

Kod:

Kod: Tümünü Seç Tümünü Kopyala

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  jQuery.noConflict();
  jQuery(document).ready(function($) {
    $("xxxx").click(function() {
      $("xxxx").toggle(1000);
    });
  });
</script>

Evet script kodlarımız bunlar. Şimdi bu script kodlarını inceleyelim. "$("xxxx").click(function()" burada "xxxx" olan kısıma komut verilecek alanı yazacağız. Altında yer alan "$("xxxx").toggle(1000)" kodunda ki "xxxx" kısmına da gizlenecek olan alanı yazacağız. 
Şimdi scriptimizi yukarıda oluşturduğumuz alana göre düzenleyelim :

Kod:

Kod: Tümünü Seç Tümünü Kopyala

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
   jQuery.noConflict();
    jQuery(document).ready(function($){
        $(".komutyeri").click(function(){
            $(".gizlenecekyer").toggle(1000);
        });
    });
</script>
    <div class="komutyeri">Tıkla</div>
    <div class="gizlenecekyer">
        içerik 
    </div>

Bu şekilde ayarladık. Sonuç;
"komutyeri" adlı alana tıkladığımızda "gizlenecekyer" adlı alan gizlenecek veya görünecek.
Yukarıdaki oluşturduğumuz kodları kullanarak bir demo hazırladım. Hemen demoya bakıp çalışıp çalışmadığını kontrol edelim.
Demo: http://plnkr.co/edit/QlkgmwfQxzuewOrNncfM?p=preview

Evet efektin kullanımı bu kadar. Basit, güzel ve zevkli bir efekt. Bu efekt ile yapabileceklerinize bir kaç örnek verecek olursam; açılır kapanır duyuru panelleri, açılır kapanır kullanıcı panelleri vs. 

Umarım yeterince açık olmuştur ve işinize yarar.


alıntıdır.