Jquery Toggle efekti (Göster/Gizle)

Jquery Toggle efekti (Göster/Gizle) - Baskı Önizleme

+- MyBB Depo Forum (https://mybbdepo.com)
+-- Forum: Mybb Ders Deposu (https://mybbdepo.com/mybb-ders-deposu-forumu)
+--- Forum: Yazılı Anlatım Deposu (https://mybbdepo.com/yazili-anlatim-deposu-forumu)
+--- Konu Başlığı: Jquery Toggle efekti (Göster/Gizle) (/jquery-toggle-efekti-goster-gizle-konusu.html)

Jquery Toggle efekti (Göster/Gizle) - batuhanmerci - 27-07-2014

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:

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

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

<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.
Anlatım tamamen bana aittir. İyi günler.

Cvp: Jquery Toggle efekti (Göster/Gizle) - eatik - 27-07-2014

Ellerinize sağlık hocam. Konuyu arşivime aldım bolca lazım oluyor yeni nesil tasarımlarda bu özellikler.

Cvp: Jquery Toggle efekti (Göster/Gizle) - usameavci - 28-07-2014

Elinize sağlık fakat birkaç düzenleme gerekecek. Bu şekilde kullanıldığında birden fazla var ise bir sayfada hepsi birden açılıp kapanacaktır. Şu şekilde düzeltilebilir;
Headerinclude eklenecek:

Kod:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

  jQuery.noConflict();

  jQuery(document).ready(function($) {

    $(".trigger").click(function() {

      $(this).next().slideToogle(500);

    });

  });

</script>

Kullanılacak şablona eklenecek:

Kod:

<div class="trigger">Tıkla</div>

    <div class="triggerContent">

        içerik

    </div>