jquery kodlarında ufak bir değişiklik |
5 Mesajlar | 1.308 Okunma | ||
- Üyelik 28.01.2012
- Yaş/Cinsiyet 32 / E
- Meslek Grafiker. / ercandinsel.org
- Konum Kocaeli
- Ad Soyad E** D**
- Mesajlar 670
- Beğeniler 54 / 241
- Ticaret 1, (%100)
https://coolestguidesontheplanet.com/creating-expandable-faq-page-using-jquery/ Bu sayfadaki faq tasarımını kullanıyorum style olarak kendim özelleştirdim ancak jquery içinde ufak bir düzenlemek istiyorum. Sayfaki tasarımda konuya tıklayınca cevabı açılıyor, bir diğerine tıklarsan diğeri açılıyor, benim istediğim şey sadece 1 tanesi açık olsun yani bir başlığa tıklayınca açılacak ancak başka bir başlığa tıklanırsa önceki başlık kapanacak.
- Üyelik 23.10.2016
- Yaş/Cinsiyet 27 / E
- Meslek Öğrenci
- Konum Denizli
- Ad Soyad K** C**
- Mesajlar 689
- Beğeniler 0 / 203
- Ticaret 6, (%100)
Kendi sitenin linkini verirmisin. Console üzerinde deneyeyim.
- Üyelik 28.01.2012
- Yaş/Cinsiyet 32 / E
- Meslek Grafiker. / ercandinsel.org
- Konum Kocaeli
- Ad Soyad E** D**
- Mesajlar 670
- Beğeniler 54 / 241
- Ticaret 1, (%100)
Kendi sitenin linkini verirmisin. Console üzerinde deneyeyim.
localhost üzerinde çalışıyorum hocam şuan herhangi sunucuya yüklemedim
- Üyelik 21.05.2016
- Yaş/Cinsiyet 34 / E
- Meslek -
- Konum Zonguldak
- Ad Soyad E** E**
- Mesajlar 8
- Beğeniler 1 / 4
- Ticaret 0, (%0)
<script>
$(document).ready(function() {
$('.faq_question').click(function() {
// sınıf isimleri 'open' olan elementleri x değişkenine ata
var x = document.getElementsByClassName('open');
var i;
// sınıf isimleri 'open' olan elementi ya da elementleri kapatıp(animate) sınıfı sil
for (i = 0; i < x.length; i++) {
$(x[i]).find('.faq_answer_container').animate({'height':'0'},500);
$(x[i]).removeClass('open');
}
// 'faq_answer' sınıfının yükseklik özelliğine 'px' stringini ekle ve newHeight değişkenine ata
var newHeight = $(this).closest('.faq').find('.faq_answer').height() +'px';
// tıklanan elemente en yakın 'faq' sınıfında 'faq_answer_container' sınıfını ara ve aç(animate)
$(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500);
// tıklanan elemente en yakın 'faq' sınıfına 'open' sınıfını da ekle
$(this).closest('.faq').addClass('open');
});
});
</script>
- Üyelik 28.01.2012
- Yaş/Cinsiyet 32 / E
- Meslek Grafiker. / ercandinsel.org
- Konum Kocaeli
- Ad Soyad E** D**
- Mesajlar 670
- Beğeniler 54 / 241
- Ticaret 1, (%100)
<script>
$(document).ready(function() {
$('.faq_question').click(function() {
// sınıf isimleri 'open' olan elementleri x değişkenine ata
var x = document.getElementsByClassName('open');
var i;
// sınıf isimleri 'open' olan elementi ya da elementleri kapatıp(animate) sınıfı sil
for (i = 0; i < x.length; i++) {
$(x[i]).find('.faq_answer_container').animate({'height':'0'},500);
$(x[i]).removeClass('open');
}
// 'faq_answer' sınıfının yükseklik özelliğine 'px' stringini ekle ve newHeight değişkenine ata
var newHeight = $(this).closest('.faq').find('.faq_answer').height() +'px';
// tıklanan elemente en yakın 'faq' sınıfında 'faq_answer_container' sınıfını ara ve aç(animate)
$(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500);
// tıklanan elemente en yakın 'faq' sınıfına 'open' sınıfını da ekle
$(this).closest('.faq').addClass('open');
});
});
</script>
Sen adamsın. :D
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)