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.