Bu yazımızda, yer kazanmak adına kullanılan akordiyon (accordion) yapısına hızlı bir giriş yapacağız. Amacımız: Farzedelim sık sorulan sorular gibi bir bölümünüz var, ilk etapta sorular görünür olsun, soru tıklanınca cevabı açılsın...
Bu uygulamada slideToggle efektini ve sınıf ekleme, kaldırma (addClass(), removeClass()) fonksiyonlarını kullanacağız.
Uygulama:
Soruları tıkladığınızda cevabı görünür hale gelecek.
Soru 1
Cevap 1
Soru 2
Cevap 2
Soru 3
Cevap 3
Soru 4
Cevap 4
CSS yapısı:
#area_product{
position:relative;
width:600px;
height:320px;
border:1px dashed red;
margin-bottom:5px;
padding:10px;
clear:both;
}
.plus{background:url(plus.png) no-repeat 99% 50% #ccc;}
.minus{
background:url(minus.png) no-repeat 99% 50% #2a97d0;
color:white;
-moz-box-shadow:0px 0px 2px 2px #ccc;
-webkit-box-shadow:0px 0px 2px 2px #ccc;
box-shadow:0px 0px 2px 2px #ccc;
}
#sss_app>h6{
cursor:pointer;
border-radius:4px;
padding:4px 6px 4px 8px;
width:200px;
margin:0px;
border-bottom:1px solid #ffffff;
font-size:14px;
}
HTML yapısı:
<div id="area_product">
<div id="sss_app">
<h6>Soru 1</h6>
<p>Cevap 1</p>
<h6>Soru 2</h6>
<p>Cevap 2</p>
<h6>Soru 3</h6>
<p>Cevap 3</p>
<h6>Soru 4</h6>
<p>Cevap 4</p>
</div>
</div>
JQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
//Tüm cevaplar kapatılıyor
$('#sss_app p').hide();
//artı iconu tüm sorulara ekleniyor
$('#sss_app h6').addClass('plus');
//Her elemanın peşpeşe iki tıklama için işlem başlatılıyor
$('#sss_app h6').on({
click:function(){//Birinci tıklamada
//Bu tıklamayı bir değişkene aktarıyorum
var link =$(this);
//.plus sınıfı (CSS) kaldırılıyor
//.minus sınıfı ekleniyor
$(this).removeClass('plus').addClass('minus');
//Tıklanan sorudan sonra gelen "p" etiketi açılıyor
//İkinci tıklama ile de kapanıyor
$(this).next('p').slideToggle("fast", function(){
//Eğer 'p' açık değilse '-' '+' işaret değişimi yapıyoruz
if ($(this).is(':not(:visible)')){
//Eksi ve artı işareti değiştiriliyor
link.removeClass('minus').addClass('plus');
}
});
}
});
});
</script>
Kolay gelsin, görüşmek üzere...
