JQuery ile basit akordiyon yapımı?

0 oy
0
Merhabalar, JQuery ile bir projemde basit bir akordiyon uygulaması yapmak istiyorum. Başlangıçta hepsi kapalı gelecek. Birine tıkladığımda açık olan varsa kapanacak ve açık olanın belli olması için aktif başka bir class eklenecek. Yardımcı olursanız çok sevinirim.

CEVAPLAR (1)

  • 0 oy

    Merhabalar, JQuery ile akordiyon yapımını basit bir örnekle anlatmaya çalışayım;

    Öncelikle HTML 'lerimizi oluşturalım;

    <div class="accordion">
        <div class="accordion-title">Başlık - 1</div>
        <div class="accordion-content">İçerik - 1</div>
        <div class="accordion-title">Başlık - 2</div>
        <div class="accordion-content">İçerik - 2</div>
    </div>

    .accordion class'lı ana bir kapsayıcımız var. Bunların içinde de .accordion-title class'lı div'e tıkladığımız zaman, bir sonraki .accordion-content class'lı div'i açacağız, diğerlerini ise kapalı hale getireceğiz.

    Öncelikle hepsini kapalı hale getirmek için ufak bir CSS kodu yazıyoruz.

    .accordion-content{display:none;}

    Sıra geldi JQuery kodlarımıza. Bu arada sayfanıza JQuery kütüphanesini çağırmayı unutmayın :)

    $(document).ready(function(){
        $('.accordion').find('.accordion-title').click(function(){
            $(this).next().slideToggle('fast');
            //bir sonraki div'i kapalıysa aç, açıksa kapa.
            $(this).siblings().removeClass("active");
            //active class'ını tümünden kaldır.
            $(this).toggleClass("active");
            //tıklanan elemente active class'ı yoksa ver, varsa kaldır.
            $(".accordion-content").not($(this).next()).slideUp('fast');
            //tıklanan elementten sonraki olmayan tüm div'leri kapat.
        });
    });

    Biraz açıklamaya çalışayım. accordion-title class'lı div'e tıklanınca bir sonraki .accordion-content div'i açılıyor. Diğer tüm accordion-title div'lerindeki "active" class'ı kaldırılıp, sadece tıkladığımız div'e "active" class'ı veriliyor. Tıklanan div'in sonrasındaki .accordion-content class'lı div hariç, tümü tekrar kapalı hale getiriliyor. slideToggle ve toggleClass metodunu kullandığım için active class'lı olan .toggle-title class'lı div'e bir kez daha tıklarsam, hem bir sonraki .accordion-content div'i kapanıyor hem de active class'ı bu div'den kaldırılıyor.

Cevap Verin

Bu soruya cevap verebilmek için üye girişi yapmalı ya da kayıt olmalısınız.

Şikayet Sebebiniz :
Cevabı silmek istediğinizden emin misiniz?
E-posta Adresiniz :
Şifreniz :
Facebook ile Giriş Yapın!

Hemen sormak veya cevaplamak için bize katılın!

Çıkış yapmak istediğinizden emin misiniz?

Evet Hayır