Bu yazıyı 'En güzel şey kendin yazarsan olur' gibi bir söz ışığı altında hazırlıyorum :)
<script type="text/javascript">
$(document).ready(function() {
$(".AccordionContent").hide();
$(".AccordionTitle").click(function() {
$(".AccordionContent").slideUp("normal").hide();
$(".AccordionTitle").removeClass("active");
$(this).addClass("active");
$(this).next(".AccordionContent").slideToggle("slow,");
});
});
</script>
Akordiyon içeriğimizin, açılır kapanır bir hale getirecek olan javascript kodumuz yukarıda görüldüğü gibidir. Yapılan iş gerçekten basit, jquery 1.3.2 referans olarak eklendikten sonra buradaki metot desteğini edinmiş oluyoruz. Öncelikle AccordionContent classını kullanan tüm elementleri hide metodu ile gizliyoruz. Daha sonra AccordionTitle class ını kullanan tüm başlık alanlarının click eventlarına bir fonksiyon ekliyoruz. Fonksiyondan da anlaşılacağı üzere yaptığımız işlem; öncelikle tüm içerikleri gizlemek ki bunu isterseniz yapmayabilirsiniz (eğer yapmazsanız açtığınız tüm akordiyonlar açık kalacaktır.), daha sonra tüm başlıkların class attribute ünü siliyoruz ki sadece yeni aktif olacak olan başlık aktif görünümü alabilsin. Yeni başlığa active classını verdikten sonra içeriğimizi jquery nin bize sağladığı metotlardan olan slideToggle ile içeriğimizi görünür hale getiriyoruz.
Burada önemli olan yerlerden bir tanesi, this ile aktif olacak başlığı yakaladıktan sonra, next ile aktif başlık elementinden sonra gelen ilk AccordionContent classına sahip olan elementi yakadığımızdır. Yani Title ve Content alt alta eklenmelidir.
Akordiyonda kullandığım stiller ise aşağıdaki gibi;
<style>
.AccordionTitle
{
background-color: LightGrey;
color: DarkGreen;
font-weight: bold;
padding: 5px;
margin-bottom: 5px;
cursor:pointer;
}
.active
{
background-color: DarkGreen;
color: LightGrey;
}
.AccordionContent
{
padding: 5px;
border: solid 1px DarkGreen;
display: block;
margin-top: -5px;
margin-bottom: 5px;
}
</style>
Daha sonra AccordionTitle için bir arkaplan resmi tanımlayıp active classı için de bir başka arkaplan tanımlayarak daha efektif bir akordiyon oluşturabilirsiniz.
Sayfamıza ekleyceğimiz örnek akordiyon içerikleri de aaşağıdaki gibidir, kendinize göre düzenledikten sonra rahatça kullanabilirsiniz.
<div class="AccordionTitle">
Lorem Ipsum Nedir?
</div>
<div class="AccordionContent">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum,
adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı
galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler
olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda
pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları
da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker
gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</div>
<div class="AccordionTitle">
Nereden Gelir
</div>
<div class="AccordionContent">
Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö.
45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi
vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,
bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur'
sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır.
Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum
et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden
gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok
popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet"
1.10.32 sayılı bölümdeki bir satırdan gelmektedir.
</div>
<div class="AccordionTitle">
Nereden Bulabilirim
</div>
<div class="AccordionContent">
YLorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu
mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir. Eğer bir
Lorem Ipsum pasajı kullanacaksanız, metin aralarına utandırıcı sözcükler gizlenmediğinden
emin olmanız gerekir. İnternet'teki tüm Lorem Ipsum üreteçleri önceden belirlenmiş
metin bloklarını yineler. Bu da, bu üreteci İnternet üzerindeki gerçek Lorem Ipsum
üreteci yapar. Bu üreteç, 200'den fazla Latince sözcük ve onlara ait cümle yapılarını
içeren bir sözlük kullanır. Bu nedenle, üretilen Lorem Ipsum metinleri yinelemelerden,
mizahtan ve karakteristik olmayan sözcüklerden uzaktır.
</div>
Not: Hazırladığım bu akordiyon örneği bu tarihe kadar, internet explorer, firefox, chrome ve safari tarayıcılarının en son versiyonlarında test edilmiş ve başarılı olmuştur.
Yorumlar
Yorum Gönder