Bu yazımda Javascript öğrenirken yapmış olduğum bir uygulama olan Akordiyon Uygulamasının nasıl yapıldığını anlatacağım.
Öncelikle ihtiyacımız olan şeyler bir kaç adet Başlık(Heading) headinglerin altında birer div ve o divin içinde ise p elementi olduğunu varsayalım.
Örnek HTML Kodumuz
<!doctype html>
<html lang=”tr”>
<head>…</head>
<body>
<style>
#section1, #section2, #section3{
display: none;
}
</style>
<div id=”accordion”>
<h2>Başlık 1</h2>
<div id=”section1″>
<p>…</p>
</div>
<h2>Başlık 2</h2>
<div id=”section2″>
<p>…</p>
</div>
</div>
</body>
şeklinde olmalıdır ve Javascript kodlarımız ise
var id = document.querySelector(“#accordion“);
var basliklar = id.getElementsByTagName(“h2“);
for(var i = 0; i < titles.length; i++){
basliklar[i].addEventListener(‘click’,function(){
var icerik = this.nextSibling.nextSibling;
if(icerik.style.display != “block”){
content.style.display = “block”;
}else{
content.style.display = “none”;
}
});
şeklinde olmalıdır şimdi bu Javascript kodlarını açıklamak gerekirse.
var id = document.querySelector(“#accordion”);
var basliklar = id.getElementsByTagName(“h2”);
kodu sitemizdeki id özelliği “accordion” olan html elementini seçiyoruz.
kodu ise daha demin seçtiğimiz html elementinin içindeki “h2” elemanlarını seçiyor.
Misal bizim yazmış olduğumuz HTML Kodlarında 2 adet “h2” başlığı olduğu için 2 adet eleman seçicektir.
for(var i = 0; i < basliklar.length; i++)
kısmında ise i adından bir değişken tanımlayıp basliklar dizisinin uzunluğundan düşük olduğu sürece i artmasını sağlıyor.
basliklar[i].addEventListener(“click”,fonksiyon);
kodunda ise basliklar dizisinin elemanlarına “click” event’ini bekliyor eğer tıklarsak fonksiyon’u uygulamaya sokuyor.
function(){
var icerik = this.nextSibling.nextSibling();
if(icerik.style.display != “block”){
icerik.style.display = “block”;
}else{
icerik.style.display = “none”;
}
bu fonksiyonda ise öncelikle icerik adında bir değişken tanımladık ve h2 elementinden 2 element geçti yani “div id=section” dan p elementine ulaştı
Daha sonra ise bu icerik değişkeninin display stil’inin değerini inceledi ve buna göre koşul belirleyerek tıklandığında
- Yazı gözükmüyorsa yazıyı gösterir
- Yazı gözüküyorsa yazıyı gizler
Yukarıdaki yazımda basit bir Akordiyon uygulaması yazdık.